缓加载的实现

最新推荐文章于 2023-11-09 23:55:48 发布

前端小黑

最新推荐文章于 2023-11-09 23:55:48 发布

阅读量703

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/zemprogram/article/details/92743913

JavaScript 专栏收录该内容

101 篇文章

订阅专栏

缓加载，又称为懒加载，常常用于某个页面有很多资源但是很大一部分资源一般不会用到，而请求这部分资源完全就是在浪费性能，浪费CPU，为了处理这种情况，我们往往将页面设置为当需要使用该资源时才发起对该资源的请求，这就是缓加载。

缓加载的实现方式

用户点击显示资源

在页面上为用户提供得到资源的按钮，仅当用户需要时才点击加载，不在页面一开始时跟随加载

普通的scroll事件监听处理缓加载

若要让用户浏览到对应位置时资源自动出现，我们需要判断资源所在的位置是否处在用户可见的界面中，而用户所见的界面是会随着滚动条滚动发生变化的，所以我们要使用scroll事件来判断当界面发生滚动时，资源是否会出现

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <img src="img/loading.jpg" alt="">
    <img src="img/loading.jpg" alt="">
    <img src="img/loading.jpg" alt="">
    <img src="img/loading.jpg" alt="">
    <img src="img/loading.jpg" alt="">
    <img src="img/loading.jpg" alt="">
    <img src="img/loading.jpg" alt="">
    <img src="img/loading.jpg" alt="">
    <script>
        let imgArr = ["img/img1.jpg", "img/img2.jpg", "img/img3.jpg", "img/img4.jpg", "img/img5.jpg", "img/img6.jpg", "img/img7.jpg", "img/img8.jpg", ]

        function loadImg() {
            let images = document.getElementsByTagName('img');
            let len = images.length;
            let now = 0;
            return function() {
                let clientHeight = document.documentElement.clientHeight;
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                for (let i = now; i < len; i++) {
                    if (images[i].offsetTop < clientHeight + scrollTop) {
                        images[i].src = imgArr[i];
                        now++;
                    }
                }
                if (now == len) { // 当所有图片加载完毕时，将滑动事件取消
                    document.onscroll = null;
                }
            }
        }
        loadImg(); // 打开页面时先执行一次
        document.onscroll = loadImg();
    </script>
</body>

</html>

加上防抖节流的scroll事件监听

scroll事件会在使用鼠标滚轮滚动时触发，而在上面的例子中，触发的大多数时候都不会触发加载图片的函数，但事件的触发却会损耗性能，甚至在所有图片加载完毕后，还是会继续触发事件，在这里可以使用防抖来解决这个问题

（关于防抖——>JavaScript防抖和节流）

下面对loadImg函数进行防抖的操作

function loadImg() {
    let images = document.getElementsByTagName('img');
    let len = images.length;
    let timer = null;
    let now = 0;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            let clientHeight = document.documentElement.clientHeight;
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            for (let i = now; i < len; i++) {
                if (images[i].offsetTop < clientHeight + scrollTop) {
                    images[i].src = imgArr[i];
                    now++;
                }
            }
            if (now == len) { // 当所有图片加载完毕时，将滑动事件取消
                document.onscroll = null;
            }
        }, 500);
    }
}

使用IntersectionObserver API来实现对目标元素的监听

IntersectionObserver API可用于方便地监听某个元素是否在界面中，关于其使用方法详见IntersectionObserver学习笔记

下面针对上面的html结构使用IntersectionObserver来实现缓加载

let imgArr = ["img/img1.jpg", "img/img2.jpg", "img/img3.jpg", "img/img4.jpg", "img/img5.jpg", "img/img6.jpg", "img/img7.jpg", "img/img8.jpg", ]
let index = 0;
let images = document.getElementsByTagName('img');
let len = images.length;
let flag = true;
let io = new IntersectionObserver(() => {
    if (flag) {
        images[index].src = imgArr[index];
        io.unobserve(images[index]);
        index++;
        if (index < len) {
            io.observe(images[index]); // 监听下一个元素
        } else {
            io.disconnect(); // 停止使用监听器
        }
    }
    flag = !flag;
});
io.observe(images[index]);

因为使用IntersectionObserver的observe方法时就会触发一次回调函数，所以这里设置了flag来控制其在第二次执行时才显示，当全部显示完后停止使用监听器。