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

要实现图片的懒加载，核心的方法包括：利用JavaScript监听滚动事件、通过getBoundingClientRect()判断图片是否进入可视区域、使用Intersection Observer API、结合data属性暂存图片地址。在现代浏览器中，推荐使用Intersection Observer API来实现图片的懒加载，因为它相比传统的事件监听方式更为高效且易于维护。

一、理解图片懒加载的概念

图片懒加载是一种优化网页性能的技术，它可以延迟非视口（非当前用户可见区域）图片的加载直到用户滚动到它们位置时再进行加载。这种方法可以显著减少初次页面加载的时间、减少无谓的带宽使用，并提升用户体验。

二、使用监听滚动事件和getBoundingClientRect()

在传统方法中，我们首先为每个需要懒加载的图片标记一个特殊的data属性（如data-src）来存储实际的图片地址。然后，通过监听滚动事件，每次用户滚动页面时，都会执行一个函数来检查图片是否出现在视口中。如果一个图片出现在视口中了，就将它的data-src值赋给src属性，这样图片就会开始加载。

滚动事件监听

window.addEventListener('scroll', lazyLoad);
function lazyLoad() {
    const images = document.querySelectorAll('img[data-src]');
    images.forEach(image => {
        if (isElementInViewport(image)) {
            loadImage(image);
        }
    });
}

判断元素是否在视口中

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)
    );
}

加载图片

function loadImage(img) {
    img.src = img.getAttribute('data-src');
    img.removeAttribute('data-src'); // 移除属性表示已经加载过了
}

三、使用Intersection Observer API

Intersection Observer API提供了一种异步监听特定元素与其祖先元素或顶级文档视口交叉状态的方式。这种方法不需要监听和处理滚动事件，浏览器会自动告诉我们哪些元素变得可见。

创建Intersection Observer

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadImage(entry.target);
            observer.unobserve(entry.target); // 加载完后不再观察该图片
        }
    });
}, { rootMargin: '200px' }); // rootMargin可设置提前加载的距离

连接Observer和图片

将需要懒加载的图片与Observer对象关联起来。

document.querySelectorAll('img[data-src]').forEach(img => {
    observer.observe(img);
});

四、实现懒加载的最佳实践

在实现图片懒加载时，考虑以下最佳实践可以实现更优的用户体验和性能。

预设占位符

为懒加载的图片提供一个占位符，比如一个轻量级的SVG或一个加载中的动画。这样可以在图片加载前给用户一个视觉上的暂时占位，避免布局突然变化造成的不良体验。

考虑搜索引擎优化（SEO）

确保懒加载的图片仍然可以被搜索引擎抓取。比如在<noscript>标签中提供一个正常加载的图片链接，或者使用现有的懒加载库，它们通常会考虑SEO。

注意浏览器兼容性

虽然大多数现代浏览器都支持 Intersection Observer，但在一些旧版浏览器可能需要使用polyfill来实现兼容。

五、结合实例说明懒加载的写法

让我们结合HTML和JavaScript代码来说明一个简单的懒加载实现方法：

HTML示例

<img data-src="image1.jpg" alt="Lazy loaded image" />
<img data-src="image2.jpg" alt="Lazy loaded image" />
<img data-src="image3.jpg" alt="Lazy loaded image" />

JavaScript使用Intersection Observer

document.addEventListener('DOMContentLoaded', () => {
    const images = document.querySelectorAll('img[data-src]');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.getAttribute('data-src');
                img.removeAttribute('data-src');
                observer.unobserve(img);
            }
        });
    });
    images.forEach(image => {
        observer.observe(image);
    });
});

六、懒加载的进阶应用

当懒加载应用在大型项目和复杂页面上时，可能需要考虑更多的细节和性能优化点。例如，配合前端构建工具对图片进行压缩、格式转换、创建多种分辨率版本等，来进一步提升页面加载速度和用户体验。

优化图片资源

通过使用图片压缩工具如tinyPNG、ImageOptim等可以减少图像文件的大小，在不影响质量的前提下缩短下载时间。

多分辨率图片支持

为不同尺寸的屏幕提供适当大小的图片，例如使用srcset属性，让浏览器根据设备屏幕选择最合适的图片加载。

七、总结

图片懒加载是前端性能优化的重要一环。通过合理运用JavaScript，我们可以有效地实现只在用户即将查看图片时才加载它们，从而提高页面加载速度、减少服务器负担，并为用户提供更平滑的浏览体验。随着web开发技术的进步，Intersection Observer API为我们提供了一个更现代、高效和易于管理的懒加载解决方案。不过，需要注意的是，任何优化措施都应该考虑与用户体验、业务需求和技术实现之间的平衡，只有这样才能真正地优化产品的整体表现。