图片懒加载的实现

àì夳堔傛蜴生んèń 2022-09-14 09:20 305阅读 0赞

**\\1. 布局 元素必须有宽高**

**\\2. 将图片地址存储在img的自定义属性(\_src)上**

**\\3. 如果img进入页面 将自定义属性的地址赋值给 src 属性**

offsetTop == scrollTop + clientHeight 刚刚好进入页面

offsetTop < scrollTop + clientHeight 图片进入页面且超出页面的过程

**  offsetTop <= scrollTop + clientHeight**

**javascript:**

auto();
    
    // 当窗口大小发生改变的时候   事件可以连等
    window.onresize = window.onscroll = function () {
        auto();
    };
    
    function auto() {
        // 5. 获取滚动距离
        var t = document.documentElement.scrollTop;
        var cw = document.documentElement.clientHeight;
        // console.log(cw);
        // console.log(t);
        // 3. 判断每一张
        for (var i = 0; i < imgs.length; i++) {
            // 4. 获取每个img距离页面顶部的距离
            // console.log(imgs[i].offsetTop);
            if (imgs[i].offsetTop <= t + cw) {
                // 6. 将img的_src的值赋值给src
                // console.log(imgs[i].getAttribute('_src'));
                imgs[i].src = imgs[i].getAttribute('_src');
            }
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，305人围观）

还没有评论，来说两句吧...

相关阅读

相关图片懒加载的实现

\\1. 布局元素必须有宽高 \\2. 将图片地址存储在img的自定义属性(\_src)上 \\3. 如果img进入页面将自定义属性的地址赋值给 src 属性

àì夳堔傛蜴生んèń/ 2022年09月14日 09:20/ 0 赞/ 306 阅读

相关图片懒加载

1.引入js jquery.lazyload.js(如下) / Lazy Load - jQuery plugin for lazy loading

缺乏、安全感/ 2022年06月16日 06:44/ 0 赞/ 464 阅读

相关 js实现图片懒加载

概述如果是一个图片列表页，虽然好看，但是相关图片的加载要耗费非常长的时间，等待图片一格一格的加载，实在让人抓狂，如何优化此类页面呢？详细代码下载：[htt

分手后的思念是犯贱/ 2022年05月31日 10:35/ 0 赞/ 420 阅读

相关图片懒加载

<!--<me

亦凉/ 2022年05月23日 12:19/ 0 赞/ 466 阅读

相关图片懒加载

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

r囧r小猫/ 2022年05月21日 06:54/ 0 赞/ 503 阅读

相关 js实现图片懒加载

最近复习下js、简单实现一下图片的懒加载思路其实很简单：页面的img默认加载一张lodaing图片、速度会快一点、其他图片当显示在当前窗口的时候再获取data-src属

叁歲伎倆/ 2022年04月23日 09:34/ 0 赞/ 446 阅读

相关 JS实现图片懒加载

JS实现图片懒加载懒加载技术懒加载（LazyLoad）是前端优化的一种有效方式，极大的提升用户体验，图片一直是页面加载的流浪大户，现在一张图片几兆已经是很正常的

╰半夏微凉°/ 2021年10月29日 12:20/ 0 赞/ 727 阅读

相关图片懒加载

\[外链图片转存失败(img-vbwUXXxJ-1563574134995)([https://upload-images.jianshu.io/upload\_images/

川长思鸟来/ 2021年09月30日 00:24/ 0 赞/ 816 阅读

相关图片懒加载实现

现在网站页面内容越来越丰富，图片内容也越来越多，而图片过多会导致网页文件过大，从而引发加载缓慢的问题，而图片懒加载就是为解决这一问题而生。首先我们来讲Jquery的懒加载控

我会带着你远行/ 2021年09月20日 09:08/ 0 赞/ 691 阅读

相关如何实现图片懒加载？

如何实现图片懒加载？实现图片懒加载的方法：首先自定义属性如【data-imgurl】，存放着图片的路径；然后通过js判断界面滚动的位置或图片是否已加载；最后加载再去获...

朱雀/ 2020年07月02日 07:16/ 0 赞/ 1027 阅读