圖片延遲加載

感冒瞭,這周的狀態很差,昏昏沉沉的!兩天休息在傢好好休息瞭下,今天又點好點瞭,清醒瞭就搗鼓瞭一個我安排在我的便簽上的一個功能,圖片的延遲加載!衷心感謝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:
<p 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>
</p>

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

任何時候對自己認定的作品要精益求精;你不是程序員也不是設計師,你所做的事情是讓瀏覽器成為你的舞臺,讓網頁成為你道具,打開你的網頁就是你的觀眾,這場戲剛剛上演!

 

摘自  Jmarry
 

發佈留言