懒加载——网页图片的加载技术

raise_yang 发布于2019-08-21 10:43 / 856人阅读

摘要：首先，在页面中准备一个为的在这个中放一个中准备了一些然而这些都有一个的属性，准备着图片的地址，具体结构如下图片的动态加载就是通过读取元素，然后获得元素的属性的值赋予动态创建的图片的，从而实现了图片的创建。

目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度，具体实现的技术并不复杂，下面分别对其说明。
首先，在页面中准备一个id为div1的div,在这个div中放一个ul,ul中准备了一些li,然而这些li都有一个data-src的属性，准备着图片的地址，具体结构如下：

图片的动态加载就是通过读取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%
        }

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86084.html

懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

appetizerio 2019-08-29 16:57 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

Shonim 2019-08-02 11:41 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

hedzr 2019-08-23 12:19 评论0 收藏0
函数节流和图片懒加载

摘要：然而，如果前一个定时器尚未执行，其实就是替换为一个新的定时器，目的是只有在执行函数的请求停止了一段时间后才执行。首先清除之前设置的任何定时器，定时器是储存在函数的属性中的。导读这篇文章中主要介绍一下函数节流，然后给了一个图片懒加载的例子，说图片懒加载的时候顺带提了下怎么使用JS获取页面的宽高，卷上去的长度等。参考来源主要是《JavaScript高级程序设计》。函数节流浏览器的D...

smallStone 2019-08-01 17:40 评论0 收藏0