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>