likes
comments
collection
share

性能优化之--图片的懒加载(LayLoad)

作者站长头像
站长
· 阅读数 59

前言

在国内大牌的app或者浏览器页面中，我们经常能看到这么一种情况，页面中的图片很多，但是在当用户没有滑动到下面的内容时，下方的图片不会显示出来，而在划到相应的内容部分时，执行引擎才开始加载图片。如下图

性能优化之--图片的懒加载(LayLoad) 当京东用户向下滑时，下边的图片才会开始加载，为什么要这么做呢，因为在当今互联网时代，用户体验是衡量网站质量的重要指标之一，而网页加载速度直接影响着用户体验。随着网站内容的丰富，尤其是图像资源的大量使用，如何高效加载图片成为前端性能优化的关键点。

实现思路

1、先检索图片所在位置，计算出图片的上方距离该页面最上端的距离，如果该距离小于(一个屏幕的高度+页面上下滑动的距离)，则图片开始加载。 2、但是如何控制图片加载的时间呢，这里我们的img标签用到data-src来存放img的地址的属性，当上述距离条件满足时，则将src属性修改为data-src的值。 3、用到lodash库中的时间控制， _.throttle(loadImage,500)控制loadImage函数（自己写的函数，下面会有源码）进行的时间间隔，(为什么要用到时间间隔，因为窗口滑动的监听事件在js中是很敏感的，它会很频繁地触发loadImage函数) 注意细节：

  1. 替换图片加载属性：通常，图片的源地址由src属性指定。在懒加载策略中，我们改用data-src属性存储图片的真实URL，而src则留空或设置为占位符图片，以避免图片立即下载。

  2. 监控滚动与视口位置：利用JavaScript监听scroll事件和计算图片元素相对于视口的位置(clientHeight, scrollTop, offsetTop)，判断图片是否接近或已经进入可视范围。

  3. 动态加载图片：一旦检测到图片应被加载，便将data-src中的URL赋值给src，触发图片的下载和显示。

  4. 优化与注意事项：

    • 使用DOMContentLoaded事件确保DOM树构建完毕后再执行懒加载逻辑，避免因DOM操作时机不当导致的问题。
    • 对于监听scroll事件，考虑使用防抖或节流技术减少不必要的事件触发，优化性能。
    • 加载完成后，移除事件监听器，防止内存泄漏。

  5. 利用dataset属性：HTML5引入的dataset特性使得访问自定义数据属性（如data-src）变得简单直观，便于动态操作。

知道了思路那我们就直接开始上源码

实现源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <img data-price="20"  data-src="C:\Users\lenovo\Desktop\showmaker-aigc\interview\baidu1\金智媛.jpg" />
    <img  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 src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script>
        
        const imgs = document.getElementsByTagName('img')
        const num = imgs.length;
        let n = 0
        document.addEventListener('DOMContentLoaded',()=>{
            loadImage()
        })
        
        function loadImage(){

             console.log('hh')
            //是否在可视区？
            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){
                    //数据属性
                    // console.log(imgs[i].dataset.src,imgs[i].dataset.price);
                    imgs[i].src = imgs[i].getAttribute('data-src');
                    n = i + 1
                    if(n === num){
                        window.removeEventListener('scroll',throttleLayLoad)
                    }
                }
                //图片距结构顶部的距离
                
            }

        }
        const throttleLayLoad = _.throttle(loadImage,500)
        window.addEventListener('scroll',throttleLayLoad)
    </script>
</body>
</html>

小结

总之，图片懒加载是现代Web开发中不可或缺的性能优化策略。它通过智能化地控制资源加载时机，实现了快速页面加载与流畅的滚动体验之间的完美平衡。掌握并灵活应用这一技术，对于前端开发者来说，是提升网站性能、优化用户体验的关键技能。

如果你觉得这篇文章对你有用请留下一个宝贵的👍，欢迎评论区留言交流。

转载自:https://juejin.cn/post/7380283378154356751
评论
请登录