图片懒加载怎么实现
时间: 2024-01-30 08:09:35 浏览: 21
图片懒加载是一种优化网页性能的方法,它可以减少网页的加载时间和减轻服务器的压力。当网页滚动到需要加载图片的位置时,再去加载图片,而不是一次性加载所有图片。
下面是一种实现图片懒加载的方法:
1. 给需要延迟加载的图片设置一个占位符,比如一个小图片或者一个颜色块。
2. 给每个需要延迟加载的图片添加一个自定义属性,比如 data-src,它存储着图片的真实地址。
3. 使用 JavaScript 监听滚动事件,当页面滚动到需要加载图片的位置时,获取图片的真实地址,将它赋值给图片的 src 属性。
4. 为了避免重复加载,可以给已经加载的图片添加一个标记,比如一个自定义属性或者一个 class。
下面是一个示例代码:
```html
<img class="lazyload" data-src="image.jpg" src="placeholder.jpg" alt="image">
<script>
function lazyload() {
const images = document.querySelectorAll('.lazyload');
images.forEach(image => {
const rect = image.getBoundingClientRect();
if (rect.top < window.innerHeight) {
// 获取图片真实地址
const src = image.getAttribute('data-src');
// 设置图片的 src 属性
image.setAttribute('src', src);
// 添加标记,避免重复加载
image.classList.add('loaded');
}
});
}
window.addEventListener('scroll', lazyload);
</script>
```
注意:这只是一种简单的实现方法,实际使用时还需要考虑更多因素,比如性能优化、兼容性等问题。