Javascript实现图片懒加载的示例代码

更新时间：2024年12月02日 10:32:36 作者：zqwang888

最近公司和第三方材料供应商对接开发了物资集采平台,其中有个功能需求需要展示数百张材料信息图片,有时页面会出现卡顿的情况,并使用了图片懒加载的方式进行了优化,下面把方法分享给大家一起学习,感兴趣的小伙伴跟着小编一起来看看吧

未做优化实例

以下代码仅作为示例演示给大家看，不是公司内部代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img  src="https://img.36krcdn.com/20190808/v2_1565254363234_img_jpg">
    <img  src="https://img.36krcdn.com/20190905/v2_1567641293753_img_png">
    <img   src="https://img.36krcdn.com/20190905/v2_1567640518658_img_png">
    <img   src="https://img.36krcdn.com/20190905/v2_1567642423719_img_000">
    <img   src="https://img.36krcdn.com/20190905/v2_1567642425030_img_000">
    <img  src="https://img.36krcdn.com/20190905/v2_1567642425101_img_000">
    <img src="https://img.36krcdn.com/20190905/v2_1567642425061_img_000">
    <img  src="https://img.36krcdn.com/20190904/v2_1567591358070_img_jpg">
    <img  src="https://img.36krcdn.com/20190905/v2_1567641974410_img_000">
    <img  src="https://img.36krcdn.com/20190905/v2_1567641974454_img_000">
</body>
</html>

一次性加载所有的图片，这对浏览器的页面加载是不友好的。

浏览器的工作机制

1.首先了解一下浏览器的运行机制

当我们访问一个网页时

解析HTML文档：浏览器从服务器获取HTML文档并开始解析，构建DOM树。
下载样式表：浏览器下载CSS样式表，并形成CSS树。
渲染页面：浏览器将DOM树和CSS树结合起来，生成渲染树，并最终绘制出可见的页面。
处理脚本：如果页面中有JavaScript脚本，浏览器会执行这些脚本。

2.虽然 JS 是单线程的，但是浏览器是多线程的；img 标签和 script 标签一样都会让浏览器启动新的下载线程去下载图片、JS 文件等；如果页面上同时让很多图片一起加载，那会让浏览器启动很多并发任务，增加浏览器的压力；这就犹如上高速，车流量如果太大，就容易造成堵塞。

懒加载

要实现懒加载，我们需要手动控制图片的加载过程，而不是让浏览器自动下载所有的<img>标签中的图片。

1.使用数据属性

将实际的图片地址存储在data-src属性中

    <img  data-src="https://img.36krcdn.com/20190905/v2_1567641293753_img_png">
    <img   data-src="https://img.36krcdn.com/20190905/v2_1567640518658_img_png">

2.监听滚动事件

        // 当DOM内容加载完成后执行
        document.addEventListener('scroll', () => {
            // 调用loadImage函数
            loadImage();
        });

3.功能函数的实现

        // 定义 loadImage 函数
        function loadImage() {
            // 获取文档的可视区高度
            let screenHeight = document.documentElement.clientHeight;
 
            // 获取滚动条的位置（兼容不同浏览器）
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 
            // 遍历所有图片
            for(let i = 0; i < num; i++){
 
                // 检查当前图片是否在可视区内
                if(imgs[i].offsetTop<screenHeight + scrollTop){
 
                    // 获取图片的 src 属性值（使用 data 属性）
                    imgs[i].src = imgs[i].getAttribute('data-src');
 
                    // 更新当前加载的图片索引
                    n = i + 1;
 
                    // 检查是否加载完所有需要懒加载的图片
                    if (n === num){
                        // 停止监听滚动事件，进行性能优化
                        window.removeEventListener('scroll', loadImage);
                    }
                }
            }
        }

clientHeight 用于获取元素的可见高度（不包括边框、内边距和外边距）。此属性通常用于获取诸如窗口、文档或元素的高度
scrollTop 用于获取或设置一个元素相对于其滚动容器的垂直滚动距离。这个值是从元素顶部到视口顶部的距离
offsetTop 用于获取元素相对于最近的带有定位（positioned）祖先元素的顶部偏移量。如果没有定位的祖先，则相对于文档的顶部

优化：懒加载进行防抖

由于滚动事件太敏感，容易高频触发懒加载函数loadImage，我们可以给它添加一个防抖的优化操作，减少事件的触发。

工具库

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>
<body>
    <img  data-price="20" data-src="https://img.36krcdn.com/20190808/v2_1565254363234_img_jpg">
    <img  data-src="https://img.36krcdn.com/20190905/v2_1567641293753_img_png">
    <img   data-src="https://img.36krcdn.com/20190905/v2_1567640518658_img_png">
    <img   data-src="https://img.36krcdn.com/20190905/v2_1567642423719_img_000">
    <img   data-src="https://img.36krcdn.com/20190905/v2_1567642425030_img_000">
    <img  data-src="https://img.36krcdn.com/20190905/v2_1567642425101_img_000">
    <img data-src="https://img.36krcdn.com/20190905/v2_1567642425061_img_000">
    <img  data-src="https://img.36krcdn.com/20190904/v2_1567591358070_img_jpg">
    <img  data-src="https://img.36krcdn.com/20190905/v2_1567641974410_img_000">
    <img  data-src="https://img.36krcdn.com/20190905/v2_1567641974454_img_000">
    
    <script>
        // 获取页面中所有的img元素
        const imgs = document.getElementsByTagName('img');
        // 获取img元素的数量
        const num = imgs.length;
        // 记录当前加载的是第几张图片，从0开始
        let n = 0;
 
        // 当DOM完全加载后，执行loadImage函数
        document.addEventListener('DOMContentLoaded', () => {
            loadImage();
        });
 
        // 定义loadImage函数
        function loadImage() {
            console.log('121122');
            // 获取可视区域的高度，兼容不同浏览器
            let screenHeight = document.documentElement.clientHeight;
            // 获取滚动条的位置，兼容不同浏览器
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 
            // 遍历所有图片
            for (let i = 0; i < num; i++){
                // 如果图片的顶部位置在可视区内
                if (imgs[i].offsetTop < screenHeight + scrollTop){
                    // 设置图片的src属性
                    imgs[i].src = imgs[i].getAttribute('data-src');
                    // 更新加载的图片索引
                    n = i + 1;
                    // 如果所有图片都已加载，则移除scroll事件的监听器，进行性能优化
                    if (n === num){
                        // console.log('加载完成');
                        // 所有图片加载完成后，移除功能函数
                        window.removeEventListener('scroll', throttleLazyLoad);
                    }
                }
            }
        }
 
        // 使用Lodash的throttle函数来延迟loadImage的执行，减少性能开销
        const throttleLazyLoad = _.throttle(loadImage, 300);
        // 添加scroll事件监听器，在滚动时执行throttleLazyLoad
        window.addEventListener('scroll', throttleLazyLoad);
        
    </script>
</body>
</html>

总结

图片懒加载是一项简单而有效的前端性能优化技术，欢迎大家一起讨论其他更好的方法。

到此这篇关于Javascript实现图片懒加载的示例代码的文章就介绍到这了,更多相关Javascript图片懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js replace替换所有匹配的字符串
这篇文章主要介绍了js replace替换所有匹配的字符串,需要的朋友可以参考下
2014-02-02
Fundebug支持监控微信小程序HTTP请求错误的方法
这篇文章主要介绍了Fundebug支持监控微信小程序HTTP请求错误的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
javascript继承机制实例详解
这篇文章主要介绍了javascript继承机制,以实例形式详细分析了javascript继承的原理与基于原型链的继承实现方法,具有不错的参考借鉴价值,需要的朋友可以参考下
2014-11-11
JS实现电影票选座的项目示例
电影院选座基本上每个人都用到过，本文主要介绍了JS实现电影票选座的项目示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
js跨域资源共享基础篇
这篇文章主要为大家详细介绍了javascript跨域资源共享的相关资料，感兴趣的朋友可以参考一下
2016-07-07
Openlayers显示瓦片网格信息的方法
这篇文章主要为大家详细介绍了Openlayers显示瓦片网格信息，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
js 覆盖和重载函数
学过JAVA的人对函数的覆盖和重载肯定是再熟悉不过了。
2009-09-09
js模糊查询实例分享
本文主要分享了js模糊查询的实现代码，没有接触到后台数据的知识，只是查询当前表格中每一行所包含的关键字。具有一定的参考价值，需要的朋友一起来看下吧
2016-12-12
用JavaScript检查大写键（Caps Lock）是否打开的脚本
用JavaScript检查大写键（Caps Lock）是否打开的脚本...
2007-06-06
简单易用的倒计时js代码
倒计时js代码想必大家都有用过，大同小异，本例为大家介绍的是简单易用的,需要的朋友可以参考下
2014-08-08