js 懒加载 background-image 图片
时间: 2023-08-18 17:11:27 浏览: 52
对于懒加载 `background-image` 图片,可以使用类似的原理和技术来延迟加载这些图片。以下是一种实现方法:
1. 在 CSS 中,将需要懒加载的元素的 `background-image` 属性设置为占位图像(placeholder image)或者为空字符串。
```css
.lazy-bg {
background-image: url('placeholder.jpg');
}
```
2. 在 HTML 中,为需要懒加载 `background-image` 的元素添加一个自定义的属性,例如 `data-bg-src`,并将真实的图片路径存储在该属性中。
```html
<div class="lazy-bg" data-bg-src="path/to/image.jpg"></div>
```
3. 使用 JavaScript 监听页面滚动事件或其他触发条件。
```javascript
window.addEventListener('DOMContentLoaded', function() {
var lazyElements = Array.from(document.querySelectorAll('.lazy-bg'));
function lazyLoad() {
lazyElements.forEach(function(element) {
if (element.getBoundingClientRect().top <= window.innerHeight && element.getAttribute('data-bg-src')) {
element.style.backgroundImage = 'url("' + element.getAttribute('data-bg-src') + '")';
element.removeAttribute('data-bg-src');
element.classList.remove('lazy-bg');
}
});
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
lazyLoad();
});
```
在上述代码中,我们首先选中所有具有 `lazy-bg` 类的元素,并在页面滚动或调整大小时触发 `lazyLoad` 函数。函数会检查每个元素是否进入了可视区域,如果是,则将 `data-bg-src` 属性的值设置为元素的 `background-image`,并移除 `lazy-bg` 类。
请注意,这只是一个基本的示例,你可以根据实际需要进行修改和优化。例如,可以添加渐进加载效果、处理多种触发条件以及使用合适的占位图像等。