图片加载防闪动的CSS方法

最新推荐文章于 2024-05-08 01:38:58 发布

原创最新推荐文章于 2024-05-08 01:38:58 发布 · 3.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#移动端图片闪动 #CSS padding

CSS方法专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种解决移动端图片加载闪烁问题的方法。通过使用CSS的padding百分比和绝对定位，预先设定图片容器的高度，避免图片加载前后高度变化引起的视觉闪烁，提升用户体验。

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

图片闪动：在移动端设置图片布局时，图片使用自适应的方式，其父元素的高度是被图片高度撑开的。在图片加载前，父元素高度为0；加载后，父元素高度为图片高度。这样的过程会造成视觉上的闪烁，影响用户体验。
因此，在用图片撑开父元素高度之前，就需要给父元素设置一个高度。这个高度不能写成定值，否则无法适配移动端各种尺寸。此时，可以利用padding百分比的方式，来将父元素作为一个占位符，提前撑开高度，以便于图片加载后放入父元素中。这样的思路而言，图片元素必须是绝对定位（绝对定位相对于父元素的边框来定位），而父元素的padding-top或者padding-bottom则为百分比（具体的百分比与图片的宽高比例相关，如100%则是1:1)。
padding百分比是以父元素的宽度做基准的（horizon-flow）或者高度做基准（vertical-flow）
以图片宽高1:1为例，如下：
HTML代码如下：

<div class="content">
	<div class="picWrapper">
		<img src="url" />
	</div>
</div>

CSS代码如下：

.picWrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 100%;
}
.picWrapper img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}