图片预加载技术很早就应用于各大网站，常见的有电子商城，还有类似瀑布流系列的图片站点。

我们来扯扯图片预加载技术的特点：

  1. 利用图片的offsetTop属性来判断图片是否进入可视区域，从而确定它是否执行预加载函数，将图片的_src属性直接赋值src，进行加载图片。

  2. 用户将页面滚动到哪个位置，图片就相应的加载这个位置的图片，减少了服务器的压力，性能提高。

  3. 避免了图片一次性全部加载而由于网速慢出现图片等待加载白屏的情况，对于未到达可视区域的图片使用 loading.gif 动态转动等待的背景图，改善了用户体验。

以下为完整的一个demo：

<style>
ul li{list-style:none;}
img{border:none;}
#box{width:800px;margin:800px auto 0;}
#box ul li{width:220px;height:300px;text-align:center;float:left;border:1px solid #ccc;margin:10px;overflow:hidden;background:url(images/loading.gif) center center no-repeat;}
#box ul li img{width:200px;}
</style>

<div id="box">
　　<ul>
　　　　<li><img _src="images/img1.jpg" src=""></li>
　　　　<li><img _src="images/img2.jpg" src=""></li>
　　　　<li><img _src="images/img3.jpg" src=""></li>
　　　　...
　　　　<li><img _src="images/img15.jpg" src=""></li>
　　</ul>
</div>

<script>
var move=(function(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var bStop=true;
        for(var attr in json){
            if(attr=="opacity"){
                var iCur=Math.round(getStyle(obj,attr)*100);
            }

            var iSpeed=(json[attr]-iCur)/7;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

            if(iCur!=json[attr]){
                bStop=false;
            }

            if(attr=="opacity"){
                obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")'; 
                obj.style.opacity=(iCur+iSpeed)/100;
            }
        }

        if(bStop){
            clearInterval(obj.timer);
                if(fn){
                    fn();
                }
        }
    },30) 
});

var getStyle=(function(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
    else{
        return getComputedStyle(obj,false)[attr];
    }
});

//绑定事件函数
var addEvent=(function(obj,sEvent,fn){
    if(obj.attachEvent){
        obj.attachEvent("on"+sEvent,fn);
    }
    else{
        obj.addEventListener(sEvent,fn,false);
    } 
});

//核心部分
var preloadImg=(function(){
    var oBox=document.getElementById("box"),
    aImg=oBox.getElementsByTagName("img");

    for(var i=0;i<aImg.length;i++){
        aImg[i].unLoad=true;  //给所有图片做个未加载的标记
    }

    addEvent(window,"scroll",showImg);

    function showImg(){
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop,
        viewH=document.documentElement.clientHeight;
        for(var i=0;i<aImg.length;i++){
            if(aImg[i].offsetTop<scrollTop+viewH&&aImg[i].unLoad){ //通过不断获取网页滚动的高度，再判断图片是否进入可视区域
                aImg[i].src=aImg[i].getAttribute("_src");
                aImg[i].style.filter="alpha(opacity:0)";
                aImg[i].style.opacity=0;
                move(aImg[i],{opacity:100});  // 图片透明度由0到100逐渐显示
                aImg[i].unLoad=false;  // 标记清除
            }
        }
    } 
});

preloadImg();　//调用函数
</script>