前端常用技术之图片懒加载

╰半橙微兮° 2022-07-14 05:26 144阅读 0赞

目前，一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度，。避免网页打开时加载过多资源，让用户等待太久。

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>图片懒加载实例</title>
        <style>
            * {
                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%
            }
        </style>
    </head>
    <body>
        <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>
        <script>
            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;
            }
            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.onload = function () {
                window.onscroll();
            };
        </script>
    </body>
    </html>