js 代码如何实现图片懒加载

图片懒加载是一种优化网页加载性能的技术手段，它可以延迟非视口内图片的加载、减少初次加载对服务端的压力、提升用户体验。在JavaScript中实现图片懒加载的基本原理是，先让图片元素的src属性为空或者是一个占位图，当这个图片元素滚动到可视区域时，再将真正的图片地址赋值给src属性。这种技术的核心是监听滚动事件并计算图片是否进入了可视区域。

例如，通过IntersectionObserver API，这个现代浏览器提供的接口，可以让我们以一种高效且简单的方式来实现懒加载。接下来我们将详细介绍如何使用JavaScript代码来实现图片懒加载。

一、准备工作

在实现图片懒加载之前，我们首先需要设定页面上的图片标签结构。传统的图片标签如下所示：

<img src="real-image.jpg" alt="description" />

为了实现懒加载，我们需要修改为包含占位图和真实图片路径的数据属性，比如：

<img data-src="real-image.jpg" src="placeholder.png" alt="description" class="lazyload" />

其中，data-src将存储真实的图片路径，src属性则暂时使用一个轻量级的占位图。

二、使用 `IntersectionObserver` 实现懒加载

1. 初始化 `IntersectionObserver`

let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        // 当前元素进入可视区域内
        if (entry.isIntersecting) {
            // 加载真实图片
            loadImage(entry.target);
            // 停止观察当前元素，避免重复加载
            observer.unobserve(entry.target);
        }
    });
});

2. 定义 `loadImage` 函数

function loadImage(img) {
    const realSrc = img.getAttribute('data-src');
    if (realSrc) {
        img.src = realSrc;
        img.removeAttribute('data-src'); // 可选步骤，移除不再需要的属性
    }
}

3. 观察所有懒加载图片

document.querySelectorAll('.lazyload').forEach(img => {
    observer.observe(img);
});

三、使用传统 `scroll` 事件监听实现懒加载

对于不支持IntersectionObserver的浏览器，我们可以通过监听滚动事件以及计算元素位置的方式来实现一个传统的懒加载。

1. 检查图片是否在可视区域

function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

2. 滚动事件处理器

function onScroll() {
    const lazyloadImages = document.querySelectorAll('.lazyload');
    lazyloadImages.forEach(img => {
        if (isElementInViewport(img)) {
            loadImage(img);
        }
    });
}
window.addEventListener('scroll', onScroll);

四、进阶优化

图片懒加载虽然可以优化性能，但经常会因为滚动事件频发而导致性能问题。以下是一些可以使用的优化措施：

1. 防抖与节流

使用防抖和节流函数优化滚动事件，以减少事件触发的频率，而不损失用户体验。

2. 占位图优化

选取恰当的占位图。有时我们可以使用SVG或CSS的方式生成一个轻量级的背景图，或者使用模糊的小尺寸图片。

3. 提前加载

在图片即将进入可视区域前一定距离时提前加载，这可以通过调整IntersectionObserver的rootMargin属性或在scroll事件中加入加载距离来实现。

五、总结

懒加载技术对于改善网站性能、减少不必要的网络流量、和优化用户体验非常有效。使用IntersectionObserver是实现懒加载的现代并且性能优越的方法，但同时，为了兼容性，也可以通过监听滚动事件和计算元素位置的方式来兼容旧浏览器。运用以上技术，开发者可以在提供丰富的内容的同时，依然保持页面的快速响应。