<html>
<body>
<div id='parent'>
<div class='pin'>
</div>
</div>
</body>
<script>
var oPin = document.createElement('div')
oPin.className = 'pin'
oParent.appendChild(oPin)
var oImg = document.createElement('img')
loadImg('./image/'+ data[i].src,callBack,oImg) //这里是你的图片地址
oImg.src = './image/'+ data[i].src
oPin.appendChild(oImg)
</script>
</html>
这不算是多线程。load一个等待图 只要隐藏、显示就可以了。
请求服务之前显示等待图，当后台操作完成之后，回调函数中把等待图再次隐藏。
CPU 占用有可能是前台死循环 或者是后台的问题，这俩并不冲突。
意思应该是延迟加载，延迟加载主要是因为一次加载图片过多会导致网络请求过多，性能下降。所以才有延迟加载这一说。
主要思路：
在HTML引入图片是，不要用src直接引入图片路径，
定一个_src私有属性存储图片路径。
当页面加载时，先加载可视区的图片，即将私有属性_src 修改为src。
下面是思路的代码实现：
<style>* {margin:0px padding:0px}
ul {width:996px overflow:hidden border:1px solid #ccc margin:10px auto}
li {list-style:none float:left margin:10px width:300px border:1px solid yellow height:200px}
img {width:100% display:block height:100%}
</style>
<script>
window.onload=function(){
var aImg = document.getElementsByTagName('img')
timeOut()
window.onscroll = timeOut
function timeOut()
{
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
var clientHeight = document.documentElement.clientHeight
var top = scrollTop + clientHeight
for(var i=0i<aImg.lengthi++)
{
var oImgTop = getPos(aImg[i]).top
if(top > oImgTop)
{
aImg[i].src = aImg[i].getAttribute('_src')
}
}
}
function getPos(obj)
{
var left = 0
var top = 0
while(obj)
{
left += obj.offsetLeft
top += obj.offsetTop
obj = obj.offsetParent
}
return {'left':left,'top':top}
}
}
</script>
</head>
<body>
<ul>
<li><img _src="img/b1.jpg" /></li>
<li><img _src="img/b2.jpg" /></li>
<li><img _src="img/b3.jpg" /></li>
<li><img _src="img/b4.jpg" /></li>
<li><img _src="img/b5.jpg" /></li>
<li><img _src="img/b6.jpg" /></li>
<li><img _src="img/b7.jpg" /></li>
<li><img _src="img/b8.jpg" /></li>
<li><img _src="img/b9.jpg" /></li>
<li><img _src="img/b10.jpg" /></li>
<li><img _src="img/b1.jpg" /></li>
<li><img _src="img/b2.jpg" /></li>
<li><img _src="img/b3.jpg" /></li>
<li><img _src="img/b4.jpg" /></li>
<li><img _src="img/b5.jpg" /></li>
<li><img _src="img/b6.jpg" /></li>
<li><img _src="img/b7.jpg" /></li>
<li><img _src="img/b8.jpg" /></li>
<li><img _src="img/b9.jpg" /></li>
<li><img _src="img/b10.jpg" /></li>
<li><img _src="img/b1.jpg" /></li>
<li><img _src="img/b2.jpg" /></li>
<li><img _src="img/b3.jpg" /></li>
<li><img _src="img/b4.jpg" /></li>
<li><img _src="img/b5.jpg" /></li>
<li><img _src="img/b6.jpg" /></li>
<li><img _src="img/b7.jpg" /></li>
<li><img _src="img/b8.jpg" /></li>
<li><img _src="img/b9.jpg" /></li>
<li><img _src="img/b10.jpg" /></li>
<li><img _src="img/b1.jpg" /></li>
<li><img _src="img/b2.jpg" /></li>
<li><img _src="img/b3.jpg" /></li>
<li><img _src="img/b4.jpg" /></li>
<li><img _src="img/b5.jpg" /></li>
<li><img _src="img/b6.jpg" /></li>
<li><img _src="img/b7.jpg" /></li>
<li><img _src="img/b8.jpg" /></li>
<li><img _src="img/b9.jpg" /></li>
<li><img _src="img/b10.jpg" /></li>
</ul>
