js实现列表的图片懒加载
时间: 2023-11-28 12:04:56 浏览: 32
当涉及到列表中的图片懒加载时,我们需要针对每个列表项中的图片进行处理。以下是使用 JavaScript 实现列表图片懒加载的基本步骤:
1. HTML 结构上,将每个列表项中的 `<img>` 标签的 `src` 属性设置为占位图或者空白图,并将真实的图片地址存储在自定义的 `data-src` 属性中。例如:
```html
<ul id="image-list">
<li><img src="placeholder.jpg" data-src="image1.jpg" alt="Image 1"></li>
<li><img src="placeholder.jpg" data-src="image2.jpg" alt="Image 2"></li>
<li><img src="placeholder.jpg" data-src="image3.jpg" alt="Image 3"></li>
<!-- 更多列表项 -->
</ul>
```
2. 使用 JavaScript 获取到列表项,并为每个列表项中的图片添加懒加载功能。
```javascript
window.addEventListener('DOMContentLoaded', function() {
const lazyImages = document.querySelectorAll('#image-list img[data-src]');
function lazyLoad() {
lazyImages.forEach(function(img) {
if (img.getBoundingClientRect().top < window.innerHeight) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}
// 页面滚动时触发懒加载
window.addEventListener('scroll', lazyLoad);
});
```
这个示例代码会在页面加载完成后,获取所有具有 `data-src` 属性的图片元素,并监听滚动事件。如果图片进入可视区域,则将 `data-src` 属性的值赋给 `src` 属性,从而触发图片加载。
请注意,使用以上示例代码时,你需要将 `#image-list` 修改为你实际使用的列表的 ID 或选择器。另外,如果列表包含大量图片,你可能需要考虑优化懒加载的触发时机,例如在用户停止滚动后再进行懒加载,以减少性能开销。