图片懒加载

什么是图片懒加载？

在网页中实现图片懒加载（Lazy Loading）可以有效地减少页面初始加载时间，提升用户体验。图片懒加载的核心思想是在用户即将滚动到图片位置时才加载图片资源，从而减少页面的初始加载量

如何实现图片懒加载？

1.使用 HTML 原生loading属性

<img src="image.jpg" loading="lazy" alt="图片描述">

2.使用 JavaScript 滚动事件监听（不建议）

• 性能问题

scroll 事件会在用户滚动时频繁触发，导致 JavaScript 函数不断执行，尤其在页面内容较多时，对性能的影响明显。这种频繁触发的机制会引发“抖动”（jank），即页面在滚动时出现卡顿现象，影响用户体验。

• 复杂的代码逻辑

在 scroll 事件中实现懒加载需要编写额外的代码来处理图片的加载判断逻辑，还需要兼顾视口大小变化等情况。这不仅增加了代码复杂性，还容易引发 BUG

• 无法自动处理视口变化

如果用户调整浏览器窗口大小或在移动设备上旋转屏幕，scroll 事件的触发条件可能需要额外处理。为了确保懒加载在这些情况下正确执行，必须监听 resize 事件，并在代码中处理视口变化带来的各种问题，这进一步加大了代码复杂度。

• 滚动事件监听需要防抖/节流

如果一定要使用 scroll 事件实现懒加载，通常需要用防抖（debounce）或节流（throttle）技术来限制事件触发的频率。这虽然能一定程度上缓解性能问题，但会进一步增加代码复杂度和维护成本。

3.使用JavaScript和Intersection Observer

如果需要兼容不支持 loading="lazy" 属性的浏览器，可以使用 JavaScript 的 Intersection Observer API 来实现图片懒加载。

//html
<img data-src="image.jpg" alt="图片描述" class="lazy-load">

//css
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s;
}
.lazy-load.loaded {
    opacity: 1;
}

//js
document.addEventListener("DOMContentLoaded", function () {
    const images = document.querySelectorAll("img.lazy-load");
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.getAttribute("data-src");
                img.classList.add("loaded");
                observer.unobserve(img);
            }
        });
    });

    images.forEach(img => observer.observe(img));
});