js图片懒加载
时间: 2023-07-05 13:25:08 浏览: 57
图片懒加载是一种延迟加载图片的技术,可以提升页面加载速度和性能。在使用 JavaScript 实现图片懒加载时,可以先将图片的 src 属性设置为一个占位符(例如一张空白的小图片),然后通过监听页面滚动事件或其他触发条件,判断图片是否进入浏览器的可视区域内,如果是,则将占位符替换为真实的图片地址,从而实现图片懒加载。以下是一个简单的示例代码:
```javascript
// 获取所有需要懒加载的图片元素
const lazyImages = document.querySelectorAll('.lazy');
// 监听页面滚动事件
window.addEventListener('scroll', () => {
// 遍历所有需要懒加载的图片元素
lazyImages.forEach(img => {
// 判断图片是否进入可视区域
if (img.getBoundingClientRect().top < window.innerHeight) {
// 将占位符替换为真实图片地址
img.src = img.dataset.src;
// 移除懒加载的 class
img.classList.remove('lazy');
}
});
});
```
在上述代码中,我们首先通过 `document.querySelectorAll()` 方法获取所有需要懒加载的图片元素,然后监听 `window` 对象的 `scroll` 事件,当页面滚动时,遍历所有图片元素,判断是否进入可视区域,如果是,则将占位符替换为真实图片地址,并移除 `lazy` 类。需要注意的是,在 HTML 中需要将真实图片地址存储在 `data-src` 属性中,而不是 `src` 属性中,以避免浏览器在页面加载时自动下载图片。