使用Intersection Observer实现懒加载_javascript技巧
最新回答
巅峰小学生
2023-09-18 14:04:52
使用 Intersection Observer API 实现图片懒加载是一种高效且性能友好的方法。以下是详细的实现步骤和代码示例：
1. 原理Intersection Observer API 用于异步监听目标元素与视口的交叉状态。当目标元素进入或离开视口时，回调函数会被触发。相比传统方法（如监听 scroll 事件并手动计算 offsetTop 和 scrollTop），它性能更好，不会频繁触发重排或重绘。
2. HTML 结构为 img 标签设置一个临时属性（如 data-src）存放真实图片地址，src 先指向占位图或为空。
<img class="lazy" data-src="/images/real-image1.jpg" src="/images/placeholder.png" alt="图片1"><img class="lazy" data-src="/images/real-image2.jpg" src="/images/placeholder.png" alt="图片2">3. JavaScript 实现懒加载逻辑创建 Intersection Observer 实例，监听所有带有 .lazy 类的图片。
const lazyImages = document.querySelectorAll('img.lazy');const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; const src = img.dataset.src; if (src) { img.src = src; img.classList.remove('lazy'); } // 加载完成后停止观察 observer.unobserve(img); } });});// 开始观察每一张懒加载图片lazyImages.forEach(img => { imageObserver.observe(img);});4. 提高体验：添加加载过渡效果可以在图片加载过程中添加淡入效果，提升视觉体验。先在 CSS 中定义类：
img { opacity: 1; transition: opacity 0.3s;}img.lazy { opacity: 0;}图片加载完成后，自然从透明变为可见，实现平滑显示。
5. 兼容性处理Intersection Observer API 兼容现代主流浏览器。对于不支持的浏览器，可以结合 loading="lazy" 做降级处理：
<img class="lazy" data-src="/images/real-image1.jpg" src="/images/placeholder.png" alt="图片1" loading="lazy">6. 完整代码示例以下是完整的 HTML、CSS 和 JavaScript 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>懒加载示例</title> <style> img { opacity: 1; transition: opacity 0.3s; width: 100%; height: auto; margin-bottom: 20px; } img.lazy { opacity: 0; } </style></head><body> <h1>懒加载示例</h1> <img class="lazy" data-src="https://picsum.photos/id/10/800/600"
src="https://picsum.photos/id/10/100/100"
alt="图片1" loading="lazy"> <img class="lazy" data-src="https://picsum.photos/id/11/800/600"
src="https://picsum.photos/id/11/100/100"
alt="图片2" loading="lazy"> <img class="lazy" data-src="https://picsum.photos/id/12/800/600"
src="https://picsum.photos/id/12/100/100"
alt="图片3" loading="lazy"> <script> document.addEventListener('DOMContentLoaded', () => { const lazyImages = document.querySelectorAll('img.lazy'); const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; const src = img.dataset.src; if (src) { img.src = src; img.classList.remove('lazy'); } observer.unobserve(img); } }); }); lazyImages.forEach(img => { imageObserver.observe(img); }); }); </script></body></html>7. 注意事项- 及时取消观察：在图片加载完成后，调用 observer.unobserve(img) 停止观察，避免不必要的性能开销。
- 占位图：使用占位图（如低质量图片或纯色图）可以提升用户体验，避免页面布局抖动。
- 性能优化：对于大量图片，可以分批加载或使用虚拟滚动技术进一步优化性能。
通过以上方法，你可以高效地实现图片懒加载，提升页面加载性能和用户体验。
热门标签
