前端性能优化实战：掌握图片懒加载技巧

相信大家平时在网购的时候都会有往下滑的时候看到图片加载出来的瞬间，这就是图片懒加载，没错，本文主要分享的是图片懒加载是如何实现的

前言

在快节奏的互联网时代，网页加载速度是留住用户的关键因素之一。图片作为丰富网页内容、提升视觉体验的必备元素，其庞大的体积往往是拖慢页面加载速度的"元凶"。因此，图片懒加载技术应运而生，它通过智能化地延迟图片加载时机，显著提高了页面首屏加载速度，优化了用户体验。本文将深入介绍图片懒加载的原理、实施步骤，并结合具体代码实例，带你领略这一前端性能优化利器的魅力。

浏览器加载机制概览

浏览器加载网页时遵循一定的流程：

解析HTML：构建DOM树。
下载CSS与JavaScript：构建渲染树，准备渲染页面。
图片等资源下载：浏览器并行下载资源，但过多的并发请求可能导致网络拥塞。

图片懒加载的重要性

提升首屏加载速度：仅加载视口内的图片，让用户尽快看到核心内容。
节省流量：对移动用户尤为重要，尤其是流量受限的环境下。
优化用户体验：减少用户等待时间，提高交互响应速度。

如何实现图片懒加载

修改HTML结构 ：使用data-src属性存储图片的真实URL，而非传统的src属性，避免图片预加载。
html 复制代码
```
<img data-src="your-image-url.jpg" alt="描述性文本">
```
JavaScript监控滚动事件：编写脚本监听页面滚动，判断图片是否接近或已进入可视区域。
动态加载图片 ：当图片位置符合条件时，通过JavaScript将data-src的值赋给src，触发图片加载。
防抖与节流：为滚动事件添加防抖(debounce)或节流(throttle)处理，防止滚动过程中频繁触发图片加载逻辑，进一步优化性能。

示例代码详解

实现图片懒加载的技术要点

修改HTML结构： 利用data-src属性存储图片的实际URL，而非直接使用src属性，避免图片预加载。例如：

Html 复制代码

<img data-src="image-url.jpg" alt="描述性文本">

监听滚动事件： 通过JavaScript监听滚动事件，判断图片是否接近或已进入可视区域。这里可以利用防抖（debounce）或节流（throttle）函数减少事件处理函数的执行频率，避免性能问题。例如，引入Lodash库的throttle函数：

Javascript 复制代码

window.addEventListener('scroll', _.throttle(checkImages, 200));

动态加载图片： 在checkImages函数中，遍历图片列表，检查每个图片的offsetTop属性（图片距离页面顶部的距离），并与当前窗口的scrollTop（滚动条位置）及clientHeight（可视区域高度）比较，决定是否加载图片。

Javascript 复制代码

function checkImages() {
    const screenHeight = document.documentElement.clientHeight;
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    for (let i = 0; i < imgs.length; i++) {
        if (imgs[i].offsetTop < screenHeight + scrollTop) {
            imgs[i].src = imgs[i].dataset.src;
            // 当所有符合条件的图片加载完毕，移除滚动监听
            if (i === imgs.length - 1) {
                window.removeEventListener('scroll', throttleLayLoad);
            }
        } else {
            break;
        }
    }
}

以下是一个简化的懒加载实现代码，包含了基本的滚动监听和图片加载逻辑，并采用了Lodash的throttle函数来限制事件处理函数的执行频率。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 引入Lodash库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <style>
        /* 简单样式 */
        img { width: 100%; height: auto; }
    </style>
</head>
<body>

<!-- 图片列表，使用data-src存放真实图片地址 -->
<img data-src="path/to/image1.jpg" alt="Image 1">
<!-- 更多图片... -->

<script>
    const imgs = document.querySelectorAll('img[data-src]');
    const numImages = imgs.length;
    let loadedCount = 0;

    // 加载图片函数
    function loadImage(img) {
        if (img.dataset.src) {
            img.src = img.dataset.src;
            img.onload = () => {
                loadedCount++;
                if (loadedCount === numImages) {
                    console.log('所有图片加载完毕');
                    // 图片全部加载后可移除滚动事件监听
                    window.removeEventListener('scroll', _.throttle(checkImages, 200));
                }
            };
            img.removeAttribute('data-src'); // 避免重复加载
        }
    }

    // 检查图片是否可视并加载
    function checkImages() {
        const windowHeight = document.documentElement.clientHeight;
        const scrollY = window.pageYOffset || document.documentElement.scrollTop;
        
        imgs.forEach(img => {
            if (img.offsetTop < windowHeight + scrollY) {
                loadImage(img);
            }
        });
    }

    // 页面加载时先加载可视区域的图片
    document.addEventListener('DOMContentLoaded', () => {
        checkImages();
    });

    // 监听滚动事件，使用节流处理
    window.addEventListener('scroll', _.throttle(checkImages, 200));
</script>

</body>
</html>

这段代码展示了如何结合原生JavaScript和Lodash库实现图片懒加载。通过监听滚动事件并在适当时候调用checkImages函数，判断哪些图片应当加载，并使用loadImage函数来实际加载图片。此外，通过_.throttle函数确保了即使用户快速滚动页面，也不会无谓地频繁触发图片加载逻辑，实现了性能与体验的双重优化。

总结

总结来说，图片懒加载是一种有效提升网页性能和用户体验的技术手段，尤其适用于图片密集型网站。通过将图片的实际加载推迟到用户需要查看这些图片时（即图片进入可视区域时），这种方法显著加快了页面的初始加载速度，减少了用户等待时间，同时也节约了移动端用户的流量消耗。

实现懒加载的核心步骤包括：

修改图片标签： 使用data-src属性存储图片URL，而非直接在src属性中加载。
监听滚动事件： 利用JavaScript监听页面滚动，判断图片是否接近或已处于可视范围。
动态加载： 当图片符合条件时，通过脚本将data-src的值赋给src，激活图片加载。
性能优化： 应用防抖或节流技术减少不必要的事件处理，保证页面流畅。

通过上述策略，图片懒加载不仅提升了网页的响应速度，还确保了内容的按需加载，为用户提供了一个更为流畅和高效的浏览环境。在实际应用中，开发者还可以考虑使用现有的开源库来简化实现过程，如Lozad.js等，这些库通常提供了更完善的跨浏览器兼容性和更简洁的API接口。