前端js实现图片延迟加载（懒加载）

当一个页面上有大量的图片，加载很慢，如何优化这些图片的加载，给用户更好的体验，延迟加载就是一种方式

html 布局代码

这里自定义orc属性，用来存放图片资源的路径，用于后面真正加载时候把图片的路径复制给src，一开始src存放的都是统一的压缩一个动图

<div id="box" class="box">
    <img src="./images/loading.gif" orc="./images/01.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/02.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/03.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/04.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/05.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/06.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/07.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/08.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/09.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/10.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/11.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/12.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/13.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/14.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/15.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/16.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/17.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/18.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/19.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/20.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/21.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/22.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/23.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/24.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/25.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/26.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/27.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/28.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/29.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/30.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/31.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/32.jpg" alt="">

</div>

内部书写的css代码

 <style>
        .box{
            width: 1040px;
            margin: 0 auto;
            overflow: hidden;
        }
        .box img{
            width: 500px;
            height: 300px;
            margin: 10px;
            float: left;
        }
    </style>

js代码

<script>
    var oBox = document.getElementById("box");
    var oImgs = document.querySelectorAll(" #box img");
    var flag = true;//定义节流函数开关
    var n = 0;//定义一个变量来保存加载的图片数量

    //图片懒加载原理，在页面上的未可视区域添加一个滚动条事件，
  //判断当图片距离文档顶部长度 <=  滚动条滚过的距离+窗口的高度 , 那么就进行图片优先加载
    window.onscroll = function () {
        //判断是否为false
        if(!flag){
            return
        }
        flag = !flag;//开关取反

        lazyLoad();//执行加载图片函数
        //节流函数
        setTimeout(function () {
            flag = !flag;
        },200);
    }
    lazyLoad();//初始化加载图片
    function lazyLoad() {
      // 注意这里将n赋值给i，原理就是页面没有滚动时候n不增加，图片不加载
        for (var i=n;i<oImgs.length;i++){
            //图片距离文档顶部长度 <=  滚动条滚过的距离+窗口的高度
            if(oImgs[i].offsetTop <= document.documentElement.scrollTop + window.innerHeight){
                oImgs[i].src = oImgs[i].getAttribute("orc");//把orc图片路径，复制给src
                n++;//页面继续滚动n增加
            }
        }
    }
</script>

最后打包拿走不客气

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延迟加载练习</title>
    <style>

        .box{
            width: 1040px;
            margin: 0 auto;
            overflow: hidden;
        }
        .box img{
            width: 500px;
            height: 300px;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <img src="./images/loading.gif" orc="./images/01.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/02.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/03.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/04.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/05.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/06.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/07.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/08.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/09.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/10.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/11.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/12.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/13.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/14.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/15.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/16.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/17.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/18.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/19.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/20.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/21.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/22.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/23.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/24.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/25.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/26.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/27.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/28.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/29.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/30.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/31.jpg" alt="">
    <img src="./images/loading.gif" orc="./images/32.jpg" alt="">

</div>
<script>
    var oBox = document.getElementById("box");
    var oImgs = document.querySelectorAll(" #box img");
    var flag = true;//定义节流函数开关
    var n = 0;//定义一个变量来保存加载的图片数量

    //图片懒加载原理，在页面上的未可视区域添加一个滚动条事件，
  //判断当图片距离文档顶部长度 <=  滚动条滚过的距离+窗口的高度 , 那么就进行图片优先加载
    window.onscroll = function () {
        //判断是否为false
        if(!flag){
            return
        }
        flag = !flag;//开关取反

        lazyLoad();//执行加载图片函数
        //节流函数
        setTimeout(function () {
            flag = !flag;
        },200);
    }
    lazyLoad();//初始化加载图片
    function lazyLoad() {
      // 注意这里将n赋值给i，原理就是页面没有滚动时候n不增加，图片不加载
        for (var i=n;i<oImgs.length;i++){
            //图片距离文档顶部长度 <=  滚动条滚过的距离+窗口的高度
            if(oImgs[i].offsetTop <= document.documentElement.scrollTop + window.innerHeight){
                oImgs[i].src = oImgs[i].getAttribute("orc");//把orc图片路径，复制给src
                n++;//页面继续滚动n增加
            }
        }
    }
</script>

</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容