javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Javascript图片懒加载

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

作者：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.首先了解一下浏览器的运行机制

当我们访问一个网页时

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);
                    }
                }
            }
        }

优化：懒加载进行防抖

由于滚动事件太敏感，容易高频触发懒加载函数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图片懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文