js实现图片懒加载的方法

在网页开发中，图片懒加载是一项重要的优化技术，它能显著提升页面的加载速度和用户体验。通过js实现图片懒加载，能让图片在即将进入浏览器可视区域时才进行加载，避免一次性加载大量图片导致页面卡顿。

实现图片懒加载，首先要了解浏览器的视口信息。我们可以利用 window 对象的 innerWidth 和 innerHeight 属性获取视口的宽度和高度。需要获取图片元素的位置信息，使用 getBoundingClientRect() 方法，该方法返回一个 DOMRect 对象，包含元素的大小和相对于视口的位置。

一种常见的js实现方式是使用 IntersectionObserver API。这是一种异步观察目标元素与祖先元素或视口的交集变化情况的方法。首先创建一个 IntersectionObserver 实例，传入回调函数和配置对象。回调函数接收两个参数，entries 和 observer。entries 是一个包含每个观察目标的 IntersectionObserverEntry 对象数组，通过判断 entries[0].isIntersecting 的值是否为 true，来确定图片是否进入了视口。如果为 true，则说明图片进入视口，此时可以将图片的 src 属性设置为真实的图片地址，从而触发图片加载。配置对象中可以设置 root、rootMargin 和 threshold 等属性。root 用于指定观察的根元素，默认为视口；rootMargin 可以扩大或缩小根元素的边界；threshold 表示触发回调的交集比例。

另一种传统的实现方式是通过监听 scroll 事件。在 scroll 事件的回调函数中，遍历所有需要懒加载的图片元素，获取每个图片元素的位置信息，并与视口的位置进行比较。如果图片元素即将进入视口，则加载图片。但这种方式在页面滚动时会频繁触发回调函数，可能会影响性能，需要进行防抖或节流处理。

通过合理运用这些js实现图片懒加载的方法，能有效优化网页性能，为用户带来更流畅的浏览体验。无论是使用新的 IntersectionObserver API 还是传统的 scroll 事件监听，都能根据项目的具体需求进行选择和优化。