js延迟加载图片实例代码

JavaScript延迟加载图片是一种优化网页性能的技术，特别是在网页包含大量图片时。这种技术允许网页只在用户滚动到可视区域时才加载图片，而不是一次性全部加载，从而减少了页面初始加载时间，提高了用户体验，特别是对于网络速度较慢的情况。 在JavaScript中实现延迟加载，主要涉及以下几个关键知识点： 1. **Intersection Observer API**：这是现代浏览器提供的一种API，用于监听目标元素与视口的相对位置变化。通过这个API，我们可以判断图片是否进入视口，一旦进入，就触发加载。例如： ```javascript const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; // 设置真实图片URL observer.unobserve(img); // 图片加载后，停止观察 } }); }); const lazyImages = document.querySelectorAll('img[data-src]'); lazyImages.forEach((img) => { observer.observe(img); }); ``` 2. **data-属性**：在HTML中，我们通常会将图片的真实URL存放在`data-src`这样的自定义属性中，而不是`src`属性。这样浏览器就不会立即尝试加载图片。只有当图片进入视口时，才会将`data-src`的值赋给`src`，触发加载。 3. **图片占位符**：为了在图片加载前提供视觉反馈，可以设置一个占位符背景图或者一个加载中的动画。例如： ```html <img src="placeholder.jpg" data-src="actual-image.jpg" alt="延迟加载图片"> ``` 4. **兼容性处理**：不是所有浏览器都支持Intersection Observer API，因此需要为不支持的浏览器提供回退方案，如使用`scroll`事件监听滚动。但是这种方法效率较低，因为可能会频繁触发事件，所以通常需要配合`throttle`或`debounce`函数限制执行频率。 5. **库和框架**：有一些现成的JavaScript库，如`lozad.js`和`lazysizes`，它们已经封装好了上述功能，可以方便地集成到项目中，减少开发工作量。 6. **预加载策略**：除了延迟加载，还可以根据图片的重要性或用户行为预加载部分图片。例如，当用户悬停在某个图片链接上时，可以提前加载该图片。 7. **图片格式选择**：为了进一步优化加载速度，可以考虑使用WebP、AVIF等高效图片格式，它们在保持质量的同时，文件大小更小。 8. **响应式图片**：利用`<picture>`元素和`srcset`属性，可以根据设备的像素密度和屏幕宽度提供不同尺寸的图片，确保用户始终加载最合适的图像。 通过这些技术和策略，我们可以有效地实现JavaScript延迟加载图片，提升网页性能，同时提供更好的用户体验。