IntersectionObserver实现图片懒加载

IntersectionObserver实现图片懒加载是一种高效的方法，它通过异步观察目标元素与视窗的交叉状态来决定何时加载图片，从而提升页面性能。以下是实现图片懒加载的详细步骤和代码解析：

实现步骤

创建相关img标签：在HTML中创建img标签，并设置一个初始的占位图（如loading.gif），同时使用data-src属性来存储实际的图片地址。
初始化IntersectionObserver：创建一个IntersectionObserver实例，并定义回调函数。当观察到的元素进入视窗时，回调函数会被触发。
观察目标元素：使用IntersectionObserver的observe方法来观察所有的img标签。
处理交叉状态：在回调函数中，检查每个entry的isIntersecting属性。如果为true，表示元素已进入视窗，此时将data-src的值赋给src属性，从而加载实际图片，并停止观察该元素。

代码解析<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>IntersectionObserver实现图片懒加载</title></head><body> <div style="height:2000px"></div> <div style="height:2000px"> <img src="loading.gif" data-src="absolute.jpg" class="lazyImg"> </div> <div style="height:2000px"> <img src="loading.gif" data-src="relative.jpg" class="lazyImg"> </div> <img src="loading.gif" data-src="fixed.jpg" class="lazyImg"> <script> // 创建IntersectionObserver实例 let observerImg = new IntersectionObserver( (entries, observer) => { entries.forEach(entry => { console.log(entry, "快来看看我是否出现了呀！！！"); if(entry.isIntersecting){ // 替换为正式的图片 entry.target.src = entry.target.dataset.src; // 停止监听 observer.unobserve(entry.target); } }); } ); // 获取所有需要懒加载的图片 let imgs = document.getElementsByClassName('lazyImg'); // 观察每张图片 for (let i = 0; i < imgs.length; i++) { observerImg.observe(imgs[i]); } </script></body></html>关键点说明

IntersectionObserver初始化：new IntersectionObserver(callback, options)，其中callback是交叉状态变化时的回调函数，options可配置观察的细节（如根元素、阈值等）。本例中未使用options，采用默认值。
回调函数处理：在回调函数中，遍历所有entry，检查isIntersecting属性。若为true，则加载图片并停止观察。
观察与取消观察：使用observe方法开始观察元素，unobserve方法停止观察。这有助于优化性能，避免不必要的观察。

优势

性能优化：仅在图片进入视窗时加载，减少初始页面加载时间。
异步处理：IntersectionObserver是异步的，不会阻塞主线程。
简洁代码：相比传统的滚动事件监听，代码更简洁且易于维护。

注意事项

浏览器兼容性：虽然现代浏览器普遍支持IntersectionObserver，但在某些旧版本浏览器中可能需要polyfill。
占位图设置：初始时设置合适的占位图（如loading.gif）以提升用户体验。
动态内容处理：如果页面内容动态生成，需确保新添加的图片也被观察。

通过以上步骤和代码解析，可以清晰地了解如何使用IntersectionObserver实现图片懒加载，从而有效提升页面性能和用户体验。

您可能感兴趣问答

Collapsible

热门标签

热点问答