实现图片懒加载(lazyload)

Developer 发布于2019-08-22 10:44 / 3387人阅读

摘要：当页面图片很多时，页面的加载速度缓慢，几钟内页面没有加载完成，也许会失去很多的用户。指向一张默认的图片，否则当为空时也会向服务器发送一次请求。这样便实现了懒加载。我想实现限制触发频率，来优化性能。

本文标题:实现图片懒加载(lazyload)
文章作者:Jake
发布时间:2016-11-26, 18:46:34
最后更新:2016-11-28, 17:12:59
原始链接:http://i.jakeyu.top/2016/11/26/实现图片懒加载/
许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

懒加载的意义（为什么要使用懒加载）

对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。

所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

原理

将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。

注：图片要指定宽高

当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

代码

在写代码前，需要了解各种高度。先看这篇文章scrollTop,offsetTop,scrollLeft,offsetLeft


    
    Document

JavaScript

jQuery

使用节流函数进行性能优化

如果直接将函数绑定在scroll事件上，当页面滚动时，函数会被高频触发，这非常影响浏览器的性能。

我想实现限制触发频率，来优化性能。

节流函数：只允许一个函数在N秒内执行一次。下面是一个简单的节流函数：

// 简单的节流函数
//fun 要执行的函数
//delay 延迟
//time  在time时间内必须执行一次
function throttle(fun, delay, time) {
    var timeout,
        startTime = new Date();

    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();

        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
            // 没达到触发间隔，重新设定定时器
        } else {
            timeout = setTimeout(fun, delay);
        }
    };
};
// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {
        for (var i = n; i < imgNum; i++) {
            if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
                if (img.eq(i).attr("src") == "default.jpg") {
                    var src = img.eq(i).attr("data-src");
                    img.eq(i).attr("src", src);

                    n = i + 1;
                }
            }
        }
    }
// 采用了节流函数
window.addEventListener("scroll",throttle(lazyload,500,1000));

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

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

如何实现一个图片懒加载库

摘要：几个月前实现的一个图片懒加载库，地址。而这是我们可以优化的地方，这里我们使用函数去抖，调整后的代码如下至此，也算是实现了一个简单的图片懒加载库了，如有不足之处欢迎指正，大家一起交流交流几个月前实现的一个图片懒加载库lazyload.js，github 地址。需要实现的效果相信大家都在网页中体验过图片懒加载，它应该有这样的效果：当图片进入我们的可视区时，加载这些图片。其原因相信大家...

silenceboy 2019-08-20 18:55 评论0 收藏0
实现图片懒加载(lazyload)

摘要：当页面图片很多时，页面的加载速度缓慢，几钟内页面没有加载完成，也许会失去很多的用户。指向一张默认的图片，否则当为空时也会向服务器发送一次请求。这样便实现了懒加载。我想实现限制触发频率，来优化性能。本文标题:实现图片懒加载(lazyload)文章作者:Jake发布时间:2016-11-26, 18:46:34最后更新:2016-11-28, 17:12:59原始链接:http://i....

renweihub 2019-08-30 13:10 评论0 收藏0
实现图片懒加载(lazyload)

摘要：当页面图片很多时，页面的加载速度缓慢，几钟内页面没有加载完成，也许会失去很多的用户。指向一张默认的图片，否则当为空时也会向服务器发送一次请求。这样便实现了懒加载。我想实现限制触发频率，来优化性能。本文标题:实现图片懒加载(lazyload)文章作者:Jake发布时间:2016-11-26, 18:46:34最后更新:2016-11-28, 17:12:59原始链接:http://i....

lushan 2019-08-01 16:00 评论0 收藏0
图片懒加载的前世今生

摘要：配置项配置项中的参数有以下三个所监听对象的具体祖先元素，默认是计算交叉状态时，将附加到祖先元素上，从而有效的扩大或者缩小祖先元素判定区域设置一系列的阈值，当交叉状态达到阈值时，会触发回调函数。一、前言通常情况下，HTML 中的图片资源会自上而下依次加载，而部分图片只有在用户向下滚动页面的场景下才能被看见，否则这部分图片的流量就白白浪费了。所以，对于那些含有大量图片资源的网...

zhaot 2019-08-23 16:13 评论0 收藏0
vue 图片懒加载 vue-lazyload

摘要：在项目中，如果出现大图一时半会加载不出来的情况确实很丑。如果是那种没有给定宽高靠图片撑起来的等图片加载出来再把内容挤下去的用户体验效果非常差。如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。在项目中，如果出现大图一时半会加载不出来的情况确实很丑。如果是那种没有给定宽高靠图片撑起来的等图片加载出来再把内容挤下去的用户体验效果非常差。在vue中使用vue-lazylo...

番茄西红柿 2019-04-23 13:20 评论0 收藏0