js图片懒加载（无防抖），数组方法复习

最新推荐文章于 2024-04-01 03:05:10 发布

weixin_47207556

最新推荐文章于 2024-04-01 03:05:10 发布

阅读量108

点赞数 2

分类专栏： js手写系列文章标签： js

本文链接：https://blog.csdn.net/weixin_47207556/article/details/119858363

版权

js手写系列专栏收录该内容

13 篇文章 1 订阅

订阅专栏

js图片懒加载可以延迟内存占用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
</head>
<body>
    <div style="height: 100vh;width: 100vh;background-color: #FFB866" ></div>
    <div style="display: flex; flex-direction: column">
        <img data-src="../../site-test/images/lunbo1.jpg" src="lunbo1.jpg" alt="" class="img">
        <img data-src="../../site-test/images/lunbo2.jpg" src="lunbo2.jpg" alt="" class="img">
        <img data-src="../../site-test/images/lunbo3.jpg" src="lunbo3.jpg" alt="" class="img">
        <img data-src="../../site-test/images/lunbo5.jpg" src="lunbo5.jpg" alt="" class="img">
        <img data-src="../../site-test/images/lunbo6.jpg" src="lunbo6.jpg" alt="" class="img">
        <img data-src="../../site-test/images/sunset1.jpg" src="sunset1.jpg" alt="" class="img">
    </div>
    <script>
        //待加载的图片列表
        let imgList = [...document.querySelectorAll('.img')]
        let length = imgList.length

        function lazyLoad() {
            let count = 0;
            //记录已经加载完成的img，为了从待加载列表中删除。这里存放的只是下标
            let deleteimgList= [];
            imgList.forEach((img ,index) => {
                            //方法返回元素的大小及其相对于视口的位置，是一个DOMRect对象。包括left，top，right，bottom，width，height，x(=left)，y(=top)
                let rect = img.getBoundingClientRect()
                //        window.innerHeight为浏览器窗口视口的高度
                //如果img的top值小于当前视口的高度，说明img开始进入视口，要开始加载了
                if (rect.top<window.innerHeight){
                    img.src = img.getAttribute('data-src')
                    //加载完成，放入待删除列表
                    deleteimgList.push(index)
                    count++;
                    if (count === length){
                        //全部加载完成，移除事件监听
                        document.removeEventListener('scroll',lazyLoad)
                    }
                }
            })
            //更新列表
            //filter函数接收一个回调函数作为参数，返回一个新数组。还有一个可选的thisArg参数，作为被调用时的this值
            // 对数组中的每个元素放入该回调函数进行测试，通过测试返回true，加入新数组中，否则返回false不加入新数组
            //该回调函数接受三个参数，elem，当前正在处理的元素，index（可选），array（调用filter函数本身的数组，例如这里就是imgList）
            //includes函数判断一个数组是否包含一个指定的值，返回true或false
            imgList = imgList.filter((img, index) => !deleteimgList.includes(index))

        }
         window.addEventListener('scroll',lazyLoad)


        /*
         * 总体思路，为了提升响应速度，可以对暂时不会展示到页面上的数据进行懒加载，需要的时候再加载
         * 将src值存放在另一个属性中，需要加载的时候再赋值，然后发送请求。这样还使得请求分散。懒加载一般和防抖一起使用
         * 上面代码多了两个精心处理的地方：1.加载完成的图像从imgList中移除    2.全部加载完成后移除监听
         */

    </script>

</body>
</html>

weixin_47207556

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
js图片懒加载（无防抖），数组方法复习

js图片懒加载可以延迟内存占用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片懒加载</title></head><body> <div style="height: 100vh;width: 100vh;background-color: #FFB866" ></div
复制链接

扫一扫