html怎么帮图片占位,css实现图片未加载完成时占位显示

最新推荐文章于 2024-08-08 16:33:07 发布

weixin_39824801

最新推荐文章于 2024-08-08 16:33:07 发布

阅读量1k

点赞数

文章标签： html怎么帮图片占位

本文介绍了一种利用CSS控制图片加载时显示本地占位图的方法。通过设置img标签的相对定位和after伪元素的绝对定位，结合背景图片，可以在网络图片加载未完成时展示本地占位图。示例中还展示了如何通过JavaScript延迟设置网络图片的src属性以演示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过css控制，可以实现加载网络图片时，未加载完成的时候显示本地一张占位图，加载完成后显示网络图片；

原理：通过在img标签的after伪元素上添加一张占位图，并且img都设置为position:relative;after设置position:absolute;img标签的src为网络图片，这样加载的时候由于网络图片没加载完成，就会显示本地图片，下面案例中的js是为了效果明显而故意延时设置img的src属性。

Document

img {

position: relative;

}

img::after {

content: "";

height: 100%;

width: 100%;

position: absolute;

left: 0;

top: 0;

background: url(iphonex.png ) no-repeat center;

}

setTimeout(function() {

document.querySelectorAll("img")[0].src = 'http://upload-images.jianshu.io/upload_images/7450593-65067eb4cf76d882.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240';

}, 3000);