图片延迟加载

感冒了，这周的状态很差，昏昏沉沉的!两天休息在家好好休息了下，今天又点好点了，清醒了就捣鼓了一个我安排在我的便签上的一个功能，图片的延迟加载！衷心感谢Ferris的实例网站（http://fgm.cc/learn/）！虽然没有教程，但代码都是写的非常规整的，让人看的很明白，很适合我们这种初学者学习，起到很好的引导思路的作用！

首先贴上代码：

window.onload=window.onscroll=window.onresize=function(){
        var box=document.getElementById("body");
        var allimg=box.getElementsByTagName("img");
        var oimg=noLoadImg(allimg);
        var iScrollTop=document.documentElement.scrollTop || document.body.scrollTop;
        var iClientHeight=document.documentElement.clientHeight+iScrollTop;
        var itop=ibottom=0;
        var oParent = null;
        if(oimg.length)
        {
            for(var i=0;i<oimg.length;i++)
            {
                oParent = oimg[i].parentElement;
                itop=pageY(oParent);
                ibottom=itop+oParent.offsetHeight;
                if((itop>iScrollTop&&itop<iClientHeight)||(ibottom>iScrollTop&&ibottom<iClientHeight))
                {
                    loadimg(i,oimg);
                }
            }
        }
        //未加载的图片
        function noLoadImg(imglist)
        {
            var noloadimg=[];
            for(var i=0;i<imglist.length;i++)
            {
                if(imglist[i].className!="loaded")
                {
                    noloadimg.push(imglist[i]);
                }
            }
            return noloadimg;
        }
        //渐现图片
        function loadimg(j,oimg)
        {
            var timer=null,alpha=0;
            timer=setInterval(function(){
                oimg[j].src=oimg[j].attributes["imgurl"].nodeValue;
                oimg[j].className = "loaded";
                alpha+=2;
                if(alpha>100){alpha=100};
                oimg[j].style.opacity=alpha/100;
                oimg[j].style.filter="alpha(opacity="+alpha+")";
                if(alpha==100){clearInterval(timer)};
            },20)
        }
        //Ferris的一个函数
        //取对象的Y轴相对窗体高度-兼容ie
        function pageY(element) {
            return element.offsetTop + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)    
        }
    }

我做的是把图片的链接地址放在Img的自定义的属性里，然后在js里调用赋给Img的链接上去。也可以把图片的链接地址放在数组里面。这个的话就看个人意愿了。

主要是当前页面的img元素全部都能显示到，然后当前窗口显示不到的页面图片就不加载链接地址。方法是通过当前img的上级元素的相对页面高度或者自身的相对页面高度（因为一般都是有边框或者间距的，所以用上级的相对高度比较准确点：个人理解）判断是否在当前的页面内，之内的就显示，之外的就不操作，然后给操作过得Img元素附上一个class来区别加载和未加载的img元素，之后就是绑定到事件上去。

代码上没有做面向对象也没有封装。只是自我学习。本来一直在兼容问题没有得到处理，在IE6下元素的相对高度判断有问题。导致加载区域有问题，然后我就引用了ferris的相对高度的操作函数，又有学到东西！

html:

<div id="body">
  <ul>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li>
  </ul>
</div>

demo地址：http://cowll.com/demo/LazyLoad.html

任何时候对自己认定的作品要精益求精；你不是程序员也不是设计师，你所做的事情是让浏览器成为你的舞台，让网页成为你道具，打开你的网页就是你的观众，这场戏刚刚上演！