手把手教你图片懒加载（使用节流）—— 皮一下很开心

最新推荐文章于 2022-04-18 15:53:09 发布

summer·

最新推荐文章于 2022-04-18 15:53:09 发布

阅读量220

点赞数

分类专栏： js小效果 JS html 文章标签： javascript html 图片懒加载节流 js

本文链接：https://blog.csdn.net/weixin_45774485/article/details/119842718

版权

JS 同时被 3 个专栏收录

18 篇文章 1 订阅

订阅专栏

js小效果

7 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

图片懒加载

某天，学姐突然发个消息
说：图片懒加载会不？
我：我不会……（表面上很硬气，其实慌得一批）
学姐：赶紧去学，***********
我：好勒好勒（屁颠屁颠跑去学习各位大佬对于懒加载做法的思路）

最后还是跑去看学姐的博客了，学到了思路，赶紧自己做一个试试：

思路：

学姐的思路：使用data-src属性，先把图片地址给data-src属性，然后当滚动到相应图片位置时，再去把data-src的值赋给图片的src

看完后，我的思路：既然都是先保存，为啥不把地址存到一个数组里面呢（vue经常这么干），后面思路一样

具体代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>imgLazyLoad</title>
    <style>
        img {
            width: 400px;
            height: 400px;
            display: block;
            margin-bottom: 50px;
        }
    </style>
</head>

<body>

    <img src="" data-src="https://img1.baidu.com/it/u=380076768,399887641&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="" data-src="https://img2.baidu.com/it/u=1904754077,936066459&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="" data-src="https://img2.baidu.com/it/u=189949030,801395269&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="" data-src="https://img2.baidu.com/it/u=747220983,4050105762&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="" data-src="https://img0.baidu.com/it/u=4195580426,3205498304&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="" data-src="https://img1.baidu.com/it/u=1635304286,749171219&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="" data-src="https://img0.baidu.com/it/u=3952797637,20877263&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="" data-src="https://img2.baidu.com/it/u=2860642372,2516383427&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="" data-src="https://img2.baidu.com/it/u=3382490457,1924641240&fm=15&fmt=auto&gp=0.jpg" alt="">
    <img src="" data-src="https://img0.baidu.com/it/u=1150329104,3723355472&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="" data-src="https://img1.baidu.com/it/u=3079033876,3091237705&fm=26&fmt=auto&gp=0.jpg" alt="">
    <script>
        const num = document.getElementsByTagName('img').length;
        const img = document.getElementsByTagName("img");
        const imgSrc = [
            "https://img1.baidu.com/it/u=380076768,399887641&fm=26&fmt=auto&gp=0.jpg", "https://img2.baidu.com/it/u=1904754077,936066459&fm=26&fmt=auto&gp=0.jpg", "https://img2.baidu.com/it/u=189949030,801395269&fm=26&fmt=auto&gp=0.jpg", "https://img2.baidu.com/it/u=747220983,4050105762&fm=26&fmt=auto&gp=0.jpg", "https://img0.baidu.com/it/u=4195580426,3205498304&fm=26&fmt=auto&gp=0.jpg", "https://img1.baidu.com/it/u=1635304286,749171219&fm=26&fmt=auto&gp=0.jpg", "https://img0.baidu.com/it/u=3952797637,20877263&fm=26&fmt=auto&gp=0.jpg", "https://img2.baidu.com/it/u=2860642372,2516383427&fm=26&fmt=auto&gp=0.jpg", , "https://img2.baidu.com/it/u=3382490457,1924641240&fm=15&fmt=auto&gp=0.jpg", , "https://img0.baidu.com/it/u=1150329104,3723355472&fm=26&fmt=auto&gp=0.jpg", , "https://img1.baidu.com/it/u=3079033876,3091237705&fm=26&fmt=auto&gp=0.jpg",
        ]
        let n = 0;
        lazyload(); //先加载可见区图片
        window.onscroll = lazyload();
        function lazyload() {
            let seeHeight = document.documentElement.clientHeight || document.body.clientHeight; //浏览器可见区域高度
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
            for (var i = 0; i < num; i++) {
                if (img[i].offsetTop < seeHeight + scrollTop) {
                    if (img[i].getAttribute("src") == "") {
                        (function(j) {
                            setTimeout(() => {
                                img[j].src = img[j].getAttribute("data-src");//学姐的思路
                                // img[j].src = imgSrc[j];//这是我的思路
                            }, 1000);
                        })(i)
                        n = i + 1;
                    }
                }
            }
        }
    </script>

</body>

</html>

做出来了，然后跑去给学姐看，“学姐，我做出来了！（一脸嘚瑟）”
学姐：你看看你的滚动事件被触发了多少次，这么浪费性能，你电脑能上天？
我：我马上改！（又屁颠屁颠跑去看大佬如何解决的）

要节流，像类似滚动、鼠标滑过等等这些事件，很消耗性能，所以需要限制触发频率

那么节流的思路呢：

节流一般两种思路，利用标记控制函数，或者利用定时器的timer控制

具体看代码吧（我写的例子都比较简单）

//节流函数(一)
function throttle(fn, delay) {
    let timer = null;
    return function() {
        let context = this;
        if (!timer) {
            timer = setTimeout(() => {
                console.log(timer)
                timer = null;
                fn.call(context)
            }, delay)
        }
    }
}

//节流函数(二)
function throttle(fn, delay) {
   let flag = true; //开关
   return function() {
       if (!flag)
           return false;
       flag = false;
       setTimeout(() => {
           fn()
           flag = true;
       }, delay)
   }
}

具体怎么配合懒加载呢？

//上面的懒加载代码中的：
window.onscroll = lazyload();
//改成:
window.onscroll = throttle(lazyload,300);

学姐，我做出来了 ^ - ^

乖 + _ +

summer·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
手把手教你图片懒加载（使用节流）—— 皮一下很开心

快去学一下懒加载，不然学姐打屁股了……
复制链接

扫一扫

专栏目录

手把手教你 图片懒加载（使用节流）—— 皮一下 很开心

图片懒加载

手把手教你图片懒加载（使用节流）—— 皮一下很开心