现在，收集上各大论坛，尤其是一些图片范例的网站上，在图片加载时均采用了一种名为懒加载的体式格局，详细表现为，当页面被要求时，只加载可视地区的图片，别的部份的图片则不加载，只要这些图片出现在可视地区时才会动态加载这些图片，从而勤俭了收集带宽和提高了首次加载的速率，详细完成的手艺并不庞杂，下面分别对其申明。
起首，在页面中预备一个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%
        }