js如何懒加载图片

懒加载图片是提升网页性能和用户体验的重要方法之一，通过减少页面初始加载时间、降低带宽消耗、提升页面滚动性能等手段，懒加载图片的核心思想是只有在用户需要看到图片时才加载它们。在实现懒加载时，我们可以使用JavaScript结合HTML和一些现代浏览器API来完成这一功能。下面我将详细介绍如何在JavaScript中实现图片懒加载。

一、懒加载图片的工作原理

懒加载图片的基本工作原理是将图片的实际URL存储在一个自定义属性（例如 data-src）中，而不是在 src 属性中。然后，当用户滚动到图片可见的区域时，通过JavaScript将 data-src 的值赋给 src，从而触发图片的加载。

二、使用Intersection Observer API实现懒加载

1. 什么是Intersection Observer API

Intersection Observer API 是一个现代Web API，用于观察目标元素与其祖先元素或视口（viewport）交叉状态的变化。它非常适合用于实现懒加载功能，因为它能够高效地检测图片何时进入视口。

2. 实现步骤

第一步：设置HTML结构

<img class="lazy" data-src="image1.jpg" alt="Image 1">
<img class="lazy" data-src="image2.jpg" alt="Image 2">
<img class="lazy" data-src="image3.jpg" alt="Image 3">

第二步：编写JavaScript代码

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Fallback for browsers without IntersectionObserver support
        let lazyLoad = function() {
            let active = false;
            if (active === false) {
                active = true;
                setTimeout(function() {
                    lazyImages.forEach(function(lazyImage) {
                        if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
                            lazyImage.src = lazyImage.dataset.src;
                            lazyImage.classList.remove("lazy");
                            lazyImages = lazyImages.filter(function(image) {
                                return image !== lazyImage;
                            });
                            if (lazyImages.length === 0) {
                                document.removeEventListener("scroll", lazyLoad);
                                window.removeEventListener("resize", lazyLoad);
                                window.removeEventListener("orientationchange", lazyLoad);
                            }
                        }
                    });
                    active = false;
                }, 200);
            }
        };
        document.addEventListener("scroll", lazyLoad);
        window.addEventListener("resize", lazyLoad);
        window.addEventListener("orientationchange", lazyLoad);
    }
});

三、使用其他库和工具实现懒加载

除了手动实现懒加载，我们还可以使用一些现有的JavaScript库来简化这一过程。

1. LazyLoad库

LazyLoad 是一个轻量级的JavaScript库，专门用于懒加载图片和其他元素。它支持多种配置选项，并且兼容性良好。

安装LazyLoad库

可以通过npm安装LazyLoad库：

npm install vanilla-lazyload

使用LazyLoad库

<img class="lazy" data-src="image1.jpg" alt="Image 1">
<img class="lazy" data-src="image2.jpg" alt="Image 2">
<img class="lazy" data-src="image3.jpg" alt="Image 3">

import LazyLoad from "vanilla-lazyload";
document.addEventListener("DOMContentLoaded", function() {
    let lazyLoadInstance = new LazyLoad({
        elements_selector: ".lazy"
    });
});

2. 使用图片服务

一些图片服务（如Cloudinary）提供了内置的懒加载功能，通过简单的配置就可以实现懒加载。这种方法适合不希望自己编写懒加载逻辑的开发者。

四、优化和注意事项

在实现懒加载时，有几个优化和注意事项需要考虑：

1. 占位图

为了防止图片加载前页面布局的跳动，可以使用占位图。占位图可以是一个小的、低分辨率的图片，或者是一个纯色的背景。

<img class="lazy" data-src="image1.jpg" src="placeholder.jpg" alt="Image 1">

2. 延迟加载

为了优化性能，可以通过设置延迟时间来控制图片的加载时机。例如，可以设置图片在进入视口前100px时就开始加载。

let lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy",
    threshold: 100 // 100px before entering viewport
});

3. SEO和可访问性

虽然懒加载可以显著提升页面性能，但也需要考虑SEO和可访问性问题。确保为每个图片添加 alt 属性，并合理设置 src 和 data-src。

五、总结

懒加载图片是提升网页性能和用户体验的重要技术，主要通过减少页面初始加载时间、降低带宽消耗、提升页面滚动性能来实现。Intersection Observer API 是实现懒加载的高效工具，但也可以使用现有的JavaScript库如LazyLoad来简化这一过程。在实现懒加载时，需要考虑占位图、延迟加载、SEO和可访问性等问题，以确保网页在性能和用户体验之间达到最佳平衡。通过这些方法和技巧，你可以显著提升网页的加载速度和用户满意度。