js图片（加载已经滚动的区域的图片）懒加载的实现方法

最新推荐文章于 2024-09-11 14:16:25 发布

劲枫

最新推荐文章于 2024-09-11 14:16:25 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：懒加载

本文链接：https://blog.csdn.net/TCF_JingFeng/article/details/82852072

版权

前端专栏收录该内容

60 篇文章 0 订阅

订阅专栏

这种方法，会加载已经滚动区域的所有图片，比如进入页面就到了底部，那么整个页面的图片都会加载。

区别于JS实现可视区域懒加载、Jquery实现可是区域懒加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
body{
    height: 10000px;
}
    img{
        width: 400px;
        height: 400px;
    }
</style>
<body>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
</body>
</html>
<script>

    var num = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");

    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

    lazyload(); //页面载入完毕加载可是区域内的图片
    window.addEventListener('scroll',throttle(lazyload,500,1000));

    // 实际想绑定在 scroll 事件上的 handler
    function lazyload(event) {
        var seeHeight = document.documentElement.clientHeight; //可见区域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (var i = n; i < num; i++) {
            if ( img[i].offsetTop < (seeHeight + scrollTop) && img[i].offsetTop > scrollTop) {
                if (img[i].getAttribute("src") == "") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
    // 采用了节流函数

    // 简单的节流函数
    //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);
            }
        };
    };

</script>