自定义封装图片懒加载
时间: 2023-07-19 08:20:18 浏览: 44
好的,我可以为您提供一个简单的自定义封装图片懒加载的方法:
1. 首先,我们需要给需要懒加载的图片设置一个默认的占位图片,这样可以让用户在图片加载之前看到一个占位图。
2. 接下来,我们需要在页面滚动的时候监听图片是否应该被加载。我们可以通过判断图片是否在可见区域内来决定是否加载图片。
3. 当图片出现在可见区域内时,我们可以通过动态创建一个新的图片元素,将要加载的图片赋值给这个新的图片元素的src属性,这样图片就会被加载。
4. 最后,当图片被加载完成后,我们需要将新创建的图片元素替换掉原来的占位图片元素,这样可以让用户看到真实的图片。
以下是一个简单的示例代码:
```javascript
function lazyLoadImage() {
const images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
if (isInViewport(images[i])) {
images[i].src = images[i].getAttribute('data-src');
images[i].onload = function() {
images[i].classList.add('loaded');
};
}
}
}
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
window.addEventListener('scroll', lazyLoadImage);
```
在上面的代码中,我们监听了页面滚动事件,并在滚动时调用了lazyLoadImage函数。该函数会遍历所有的img元素,并判断它们是否应该被加载。如果应该被加载,则会创建一个新的图片元素,并将原来的占位图片元素替换掉。同时,当新的图片元素加载完成后,我们会给它添加一个loaded类,这样可以让CSS样式来展示真实的图片。
希望这个方法能够对您有所帮助。