图片懒加载（Lazy Loading）是一种优化网页加载性能的技术。它的基本原理是，当页面加载时，图片等资源不会立即加载，而是在用户即将滚动到这些资源时才开始加载。这样可以减少初始页面加载的时间，提高页面性能，特别是在包含大量图片的页面上。

实现方式

1. 使用 Intersection Observer API

Intersection Observer API 是现代浏览器提供的一种工具，专门用于检测元素是否进入了视口。它是懒加载的一种高效实现方式。

示例代码：

<img data-src="image.jpg" alt="Lazy loaded image" class="lazy-load" />

document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll("img.lazy-load");
    
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.classList.remove("lazy-load");
                observer.unobserve(img);
            }
        });
    });
    
    lazyImages.forEach(img => {
        observer.observe(img);
    });
});

• data-src：图片的实际地址被存储在 data-src 属性中，而 src 属性留空或设置为占位图片。
• IntersectionObserver：用来监控图片元素是否进入视口（即 entry.isIntersecting 为 true）。
• 当图片进入视口时，将 data-src 的值赋给 src 属性，从而触发图片的加载，并停止监控该图片元素（unobserve）

2. 使用库或框架

许多现代前端框架和库（如 React、Vue、Angular 等）提供了懒加载的插件或组件，例如 React 的 react-lazyload，Vue 的 vue-lazyload。

3. 使用滚动事件 (scroll)

这种方法通过监听 scroll 事件，每次用户滚动页面时检测图片是否进入视口。如果进入，则加载图片。

示例代码：

<img data-src="image.jpg" alt="Lazy loaded image" class="lazy-load" />

function lazyLoad() {
    const lazyImages = document.querySelectorAll("img.lazy-load");

    lazyImages.forEach(img => {
        if (img.getBoundingClientRect().top < window.innerHeight) {
            img.src = img.dataset.src;
            img.classList.remove("lazy-load");
        }
    });
}

window.addEventListener("scroll", lazyLoad);

解释：

• getBoundingClientRect()：返回元素的大小及其相对于视口的位置。
• window.innerHeight：表示视口的高度。
• 当图片的顶部位置（top）小于视口高度时，图片就已经进入视口，可以进行加载。

4. 使用 JavaScript 库

一些 JavaScript 库如 LazyLoad、lozad.js 等，提供了更高级的懒加载功能和更好的浏览器兼容性。

使用 LazyLoad 库的示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.1.3/lazyload.min.js"></script>

<img class="lazy" data-src="image.jpg" alt="Lazy loaded image">

<script>
    var lazyLoadInstance = new LazyLoad({
        elements_selector: ".lazy"
    });
</script>

解释：

• LazyLoad 库自动处理图片懒加载，你只需添加 lazy 类和 data-src 属性。
• elements_selector 指定需要懒加载的元素（带有 .lazy 类的图片）。

优势

1. 提高页面性能：减少初始页面加载时间，特别是在包含大量图片或资源的页面上。
2. 节省带宽：用户只会加载他们实际看到的图片，避免了不必要的流量消耗。
3. 用户体验提升：页面会更快加载，减少白屏时间。

常见问题

1. SEO 影响：对 SEO 可能有一定影响，因为搜索引擎爬虫可能无法加载懒加载的图片。使用合适的 alt 属性和逐步增强的技术可以缓解这一问题。
2. 浏览器兼容性：虽然 Intersection Observer API 支持现代浏览器，但旧浏览器可能不支持，需要添加 polyfill 或使用其他实现方式。
3. 闪烁问题：如果懒加载处理不当，用户滚动到图片时，图片可能会闪烁一瞬间。通过预加载低分辨率的占位符或调整 src 的加载时机可以减少这种情况。