怎么实现图片懒加载
时间: 2024-01-30 13:07:34 浏览: 25
图片懒加载可以通过以下步骤实现:
1. 给所有需要懒加载的图片加上占位符,比如一张小图或者一个 loading 动画。
2. 监听页面滚动事件,判断图片是否进入可视区域。
3. 如果图片进入可视区域,则将占位符替换为真实的图片地址,实现加载。
以下是一个简单的实现示例代码:
```HTML
<img src="loading.gif" data-src="image.jpg" alt="图片" class="lazyload">
```
```javascript
// 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('.lazyload');
// 监听页面滚动事件
window.addEventListener('scroll', function() {
// 遍历所有需要懒加载的图片
for (let i = 0; i < lazyImages.length; i++) {
// 判断图片是否进入可视区域
if (lazyImages[i].getBoundingClientRect().top < window.innerHeight) {
// 将占位符替换为真实的图片地址
lazyImages[i].src = lazyImages[i].getAttribute('data-src');
// 移除 lazyload 类,避免重复加载
lazyImages[i].classList.remove('lazyload');
}
}
});
```
需要注意的是,为了提高性能和用户体验,可以在页面加载时先加载可视区域内的图片,然后再懒加载其他图片。同时,为了避免重复加载,可以在图片加载完成后移除 lazyload 类。