img中的url还未加载的时候,如何显示占位图片
时间: 2024-05-12 15:21:09 浏览: 132
你可以在img标签中设置一个占位图片,在图片加载完成之前显示该占位图片,例如:
```
<img src="placeholder.jpg" data-src="image.jpg" alt="Image" />
```
在这个例子中,`src`属性指定占位图片的URL,`data-src`属性指定要加载的图片的URL。然后,你可以使用JavaScript在页面加载时或在滚动事件中检测到img元素是否在可见范围内,如果是,则将`data-src`属性的值设置为`src`属性的值,使图片开始加载。
以下是一个简单的JavaScript函数,可以在滚动事件中检测img元素是否在可见范围内,并将`data-src`属性的值设置为`src`属性的值:
```
function lazyLoad() {
const images = document.querySelectorAll('img[data-src]');
images.forEach((img) => {
if (img.getBoundingClientRect().top < window.innerHeight) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('load', lazyLoad);
```
在这个例子中,`getBoundingClientRect()`方法返回元素的大小及其相对于视口的位置。如果`top`属性小于视口的高度,则表示该元素在可见范围内。然后,我们将`data-src`属性的值设置为`src`属性的值,使图片开始加载,并删除`data-src`属性,以便在下次滚动事件中不再检测该元素。最后,我们将`lazyLoad()`函数添加到`scroll`和`load`事件中,以便在页面滚动和加载时触发。