懶加載——網頁圖片的加載技術

目前，網絡上各大論壇，尤爲是一些圖片類型的網站上，在圖片加載時均採用了一種名爲懶加載的方式，具體表現爲，當頁面被請求時，只加載可視區域的圖片，其它部分的圖片則不加載，只有這些圖片出如今可視區域時纔會動態加載這些圖片，從而節約了網絡帶寬和提升了初次加載的速度，具體實現的技術並不複雜，下面分別對其說明。
首先，在頁面中準備一個id爲div1的div,在這個div中放一個ul,ul中準備了一些li,然而這些li都有一個data-src的屬性，準備着圖片的地址，具體結構以下：

<div id="div1">
            <ul>
                <li data-src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg"></li>
                <li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg"></li>
                <li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg"></li>
                <li data-src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg"></li>
                <li data-src="http://dl.bizhi.sogou.com/images/2014/12/02/986640.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170473_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170475_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170477_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
                <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
            </ul>
        </div>

圖片的動態加載就是經過讀取li元素，而後得到li元素的data-src屬性的值賦予動態建立的圖片的src，從而實現了圖片的建立。

function setImg(index){
                var oDiv=document.getElementById("div1")
                var oUl=oDiv.children[0];
                var aLi=oUl.children;
                if (aLi[index].dataset) {
                    var src=aLi[index].dataset.src;
                } else{
                    var src=aLi[index].getAttribute('data-src');
                }
                var oImg=document.createElement('img');
                oImg.src=src;
                if (aLi[index].children.length==0) {
                    aLi[index].appendChild(oImg); 
                }
            }

那麼怎麼識別是否在可視區域呢？這裏須要一個函數，可以實現得到當前元素距離網頁頂部的距離！

//得到對象距離頁面頂端的距離  
function getH(obj) {  
    var h = 0;  
    while (obj) {  
        h += obj.offsetTop;  
        obj = obj.offsetParent;  
    }  
    return h;  
}

當網頁的滾動條滾動時要時時判斷當前li的位置！

window.onscroll = function () {
            var oDiv = document.getElementById('div1');
            var oUl = oDiv.children[0];
            var aLi = oUl.children;

            for (var i = 0, l = aLi.length; i < l; i++) {
                var oLi = aLi[i];
                //檢查oLi是否在可視區域
                var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
                var h = getH(oLi);
                if (h < t) {
                    setTimeout("setImg(" + i + ")", 500);
                }
            }
        };

當頁面加載完成之後要主動運行一下window.onscroll，從而得到當前可視範圍內的圖片

window.onload = function () {
            window.onscroll();
        };

另外，像這樣的頁面，障眼法和美化都是必須的，好比給每一個li一個loading的圖片做爲背景，從而實現了當前圖片正在加載的效果，美化工做就是作好合理的佈局。

* {
            margin: 0;
            padding: 0;
        }

        #div1 {
            width: 520px;
            margin: 30px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        li {
            width: 160px;
            height: 160px;
            float: left;
            list-style: none;
            margin: 5px;
            background: url(loading.gif) center center no-repeat;
            border: 1px dashed green;
        }
        img{
        width:100%
        }