js实现图片懒加载

当网页图片比较大的时候，在加载的过程中img还没加载出来的时候是一片空白，

影响排版美观，我们可以用一张占位图，当资源图片资源加载完成后再把占位图替换掉:

需要加载的资源文件 <img id="logo-img" src="http://......" alt="" style="display: none;"/> 

占位图 <img id="load-img" src="../images/bitmap.png" style="display: block;"/>

<script> 

var logo = document.getElementById('logo-img'),

      load = document.getElementById('load-img');

function loadImg(img,img2,callback){     

var timer = setInterval(function(){     

if(img.complete){

//当图片资源加载完成后执行回调函数     

callback();     

clearInterval(timer);    

};     

},50);     

};    

loadImg(logo,load,function(){     

logo.style.display = 'block';     

load.style.display = 'none';     

}); 

</script>