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为我们提供了一个更现代、高效和易于管理的懒加载解决方案。不过，需要注意的是，任何优化措施都应该考虑与用户体验、业务需求和技术实现之间的平衡，只有这样才能真正地优化产品的整体表现。

相关问答FAQs：

1. 什么是图片懒加载？如何使用JS代码实现图片懒加载？

图片懒加载是一种优化网页性能的技术，它可以延迟加载页面上的图片，只有在用户需要查看它们时才进行加载。这可以减少初始页面加载时间，提高页面加载速度。

要使用JS代码实现图片懒加载，可以按照以下步骤进行操作：

• 首先，给需要进行懒加载的图片设置一个占位符，比如使用一个1×1像素的透明图片作为占位符。
• 其次，通过JS代码监听页面滚动事件，当用户滚动到一个特定位置时，动态加载图片。
• 最后，将真实的图片资源路径赋值给占位符的图片元素的src属性，完成图片的加载。

2. 在图片懒加载中，如何避免重复加载图片？

为了避免重复加载图片，可以使用一个标记变量来记录每张图片是否已经加载过。当图片被加载后，将标记变量设置为已加载的状态。

在监听页面滚动事件时，可以通过判断是否已加载的标记变量来决定是否加载图片。如果图片已经加载过，则跳过该图片的加载过程。

3. 图片懒加载对于网页性能的影响是如何的？有哪些优点和缺点？

图片懒加载对于网页性能有着显著的影响。它的优点包括：

• 减少页面初始加载时间：懒加载只加载用户可见区域的图片，可以减少页面的初始加载时间，提高用户体验。
• 节约网络资源：只有在用户需要查看图片时才加载，可以减少网络资源的浪费，节约用户的流量。

然而，图片懒加载也存在一些缺点：

• JS代码的增加：实现图片懒加载需要编写一些JS代码，这会增加页面的代码量。
• 对SEO有一定影响：懒加载的图片一开始并没有实际的src属性，这可能会影响搜索引擎对图片的索引。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。