likes
comments
collection
share

前端性能优化的关键策略：图片懒加载（LazyLoad）

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

前言

在现代网页开发中，图片作为内容的重要组成部分，往往占据了大量的带宽和加载时间。尤其是当网页中包含大量图片时，如果不进行适当的优化，很可能导致页面加载速度变慢，从而影响用户体验。如果页面一次性加载了所有图片（无论用户是否立即需要查看这些图片），可能会产生以下问题：

  1. 页面加载速度变慢：由于图片通常较大，加载它们需要时间。如果页面包含大量图片，那么整个页面的加载时间就会显著增加。
  2. HTTP请求数过多：每张图片通常都是一个单独的HTTP请求。如果页面包含大量图片，那么就会生成大量的HTTP请求，这可能导致HTTP请求过载。
  3. 服务器压力增加：服务器需要处理这些请求并发送图片数据，过多的请求可能会使服务器资源紧张，甚至导致崩溃。
  4. 不必要的带宽消耗：用户可能只查看页面上的部分图片，但所有图片都被加载了，这浪费了带宽资源。

为了提升用户体验和页面性能，前端开发者常常采用图片懒加载（LazyLoad）技术来优化图片的加载。

图片懒加载的概念

图片懒加载（LazyLoad），也称为延迟加载或按需加载，是一种只在用户需要时才加载图片的策略。具体来说，就是当图片位于视窗范围外时，不立即加载其真实内容，而是使用占位图或加载提示来代替。当用户滚动到图片所在位置时，再触发图片的加载。这种策略可以有效减少页面初次加载时的HTTP请求数，从而加快页面加载速度。

懒加载的实现原理

实现图片懒加载的核心思想是将图片的真实地址（src）暂时存储在一个自定义的数据属性（如data-src）中，而将占位图或加载提示的地址赋值给src属性。然后，我们可以通过监听滚动事件（scroll）和页面加载事件（DOMContentLoaded），判断图片是否进入视窗范围。如果图片进入视窗范围，则将其data-src属性的值赋给src属性，从而触发图片的加载。

优化步骤

首先我们先写一个简单的html页面来模拟展示多张图片：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #9ecff7;
        }
        img{
            display: block;
            margin-bottom: 50px;
            width: 400px;
            height: 400px;
        }
    </style>
    </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.将原有src交给data-src

我们将图片的真实地址暂时存储在数据属性 data-src中，因为浏览器会自动加载src属性指定资源，但是不会加载data-src属性。然后将一个占位图片的地址赋值给src属性，因为占位图通常是一个较小且简单的图像，因此它可以在短时间内快速加载和显示，且浏览器会对已经下载过的资源进行缓存，如果所有图片的占位图使用的是相同的URL，并且浏览器已经缓存了占位图，那么浏览器会进一步加快加载速度。 eg：

2.监听事件处理

监听事件处理包括监听 scroll滚动事件、DOMContentLoaded事件（因为DOM页面加载完成是首屏的图片加载的最佳时机）、load事件（首屏图片加载）。

<script>
    const imgs = document.getElementsByTagName('img');
    const num = imgs.length;
    // 注册在scroll事件上的处理函数
    const throttleLazyload = throttle(lazyload, 200);   //
    window.addEventListener('scroll', throttleLazyload);    // 添加监听事件
    let n = 0
    document.addEventListener('DOMContentLoaded', () => {
        lazyload();
    });
    window.addEventListener('load', () => {
        console.log('load');     // 立马加载第一屏图片
    });
</script>

3.可视区域图片显示

可视区域图片显示要求我们要将应该显示的图片显示出来，比如首屏图片要立马加载出来，而当滚动条滚动到哪里就要显示出对应的图片，这就涉及到了可视区域的切换，我们需要监听滚动事件，判断图片是否在可视区域，在则加载，不在则不加载图片。

<script>
    let n = 0
    // 延迟加载图片的功能
    function lazyload(event){
        // 一屏的高度
        let screenHeight = document.documentElement.clientHeight;
        // 滚动条滚动距离 多浏览器适配
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(scrollTop);
        // 图片是否在可视区域内
        for(let i = n; i < num; i++){
            if(imgs[i].offsetTop < screenHeight + scrollTop){
                // 主动触发下载
                imgs[i].src = imgs[i].getAttribute('data-src');
                n = i + 1   // 有多少张图片加载
                if(n === num){
                    console.log('所有图片全部加载完毕');
                    window.removeEventListener('scroll', throttleLazyload); // 移除监听事件
                }
            }
        }
    }
</script>

4.节流处理

因为滚动事件可能频繁触发，所以需要我们采用节流技术来减少请求触发的频率。

// 节流
function throttle(func, limit) {  
    let inThrottle;  
    return function() {  
        const context = this;  
        const args = arguments;  
        if (!inThrottle) {  
            func.apply(context, args);  
            inThrottle = true;  
            setTimeout(() => inThrottle = false, limit);  
        }  
    };  
}

总结

图片懒加载是前端性能优化的重要策略之一，通过延迟加载不在视窗范围内的图片，可以显著减少页面初次加载时的HTTP请求数，加快页面加载速度。同时结合节流、缓存等技术手段，可以进一步提升懒加载的性能和用户体验。如果想要成为一个优秀的前端工程师，在开发过程中我们就应该应充分重视像图片懒加载这样的前端性能优化工作，为用户提供更快速、更流畅的网页浏览体验。

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