目前，網路上各大論壇，尤其是一些圖片型別的網站上，在圖片載入時均採用了一種名為懶載入的方式，具體表現為，當頁面被請求時，只加載可視區域的圖片，其它部分的圖片則不載入，只有這些圖片出現在可視區域時才會動態載入這些圖片，從而節約了網路頻寬和提高了初次載入的速度，具體實現的技術並不複雜，下面分別對其說明。

　　首先，在頁面中準備一個id為div1的div,在這個div中放一個ul,ul中準備了一些li,然而這些li都有一個data-src的屬性，準備著圖片的地址，具體結構如下：

    <div id="div1">
         <ul>
            <li data-src="http://t03.pic.sogou.com/7620cd6e740c3c50.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/2c67d8e270eb61c3.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/9c9d058c0c731087.jpg"></li>
            <li data-src="http://t02.pic.sogou.com/007da8d5456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/64d939a5456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/95eb5da5456bc0ab.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/5c3fa2b5456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/f6443925456bc0ab.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/f96780b5456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/54a75d2e740c3c50.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/3b173ee50fdad689.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/95eb5da5456bc0ab.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/5c3fa2b5456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/f6443925456bc0ab.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/f96780b5456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/54a75d2e740c3c50.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/3b173ee50fdad689.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/b0e3d909c131e9cb.jpg"></li>
            <li data-src="http://t02.pic.sogou.com/27e362d461029a95.jpg"></li>
            <li data-src="http://t02.pic.sogou.com/ddfb62d6f09be522_i.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/9448c50e46a53e65.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/b7e5a7e50fdad689.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/3825466e4e3b9ce4.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/1d7d602e740c3c50.jpg"></li>
            <li data-src="http://t02.pic.sogou.com/085ea3d5456bc0ab.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/ad61be7270eb61c3.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/ed7705b270eb61c3.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/491c4cb461029a95.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/e603c6ae4e3b9ce4.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/6b6a148cdc19fbb4.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/c301bac9f514c378.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/11a6ce8e4e3b9ce4.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/41b26435456bc0ab.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/adb811acdc19fbb4.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/fbb08be9c131e9cb.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/b2ecd2ce4e3b9ce4.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/0509bff02200e0a5.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/0509bff02200e0a5.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/e655c4fe49cac8ea.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/5251ca4e740c3c50.jpg"></li>
            <li data-src="http://t03.pic.sogou.com/7fe86f66ce211acb.jpg"></li>
            <li data-src="http://t04.pic.sogou.com/541569b5df134ca6.jpg"></li>
            <li data-src="http://t01.pic.sogou.com/d34a3f0e46a53e65.jpg"></li>
            <li data-src="http://t02.pic.sogou.com/78bca85270eb61c3.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;
            //html5最新屬性
            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;
        }

　　至此，一款目前網路盛行的懶載入圖片技術即已完成，大家可以測試一下，另外，圖片源也可以通過AJAX的方式來獲得，這裡只是提供一種思路，大家可以自由發揮啦~~~~~~~。