今天聊一个图片加载提前占位的一个问题 🤔,内容比较适合初学者。
起因
在响应式页面当中,图片加载之前是不知道图片高度的,加载成功图片完全撑开。如果不做提前占位会把下面的内容挤下去,页面出现抖动,就像下面效果一样:
假如图片是自适应的,宽度为屏幕宽度的30%,高度等比例缩放,这时候是无法直接设置图片高度的,所以就导致了图片未加载前高度为0,加载成功后撑开的问题。
解决这个问题就需要对图片进行提前占位,这里虽然不确定图片的高度,但是图片的比例是确定的。(要是图片的比例都不确定那就玩不了了😅……)
padding-top
所以有请今天的主角登场:padding-top
或者padding-bottom
当padding-top
的值设置为百分比的时候,让我们先看一下mdn官方是怎么解释的:
当内边距(padding)是一个百分比的时候,百分比是和包含块(containing block)的宽度有关的,同样一定不能为负数。
说白了就是padding-top
的值如果是百分比,那么这个百分比是相对于其父容器的宽度的。
比如下面这个案例(案例写成了padding-bottom
,效果都是一样的):
.content{
width: 300px; /* 也可以是百分比 */
height: 500px;
background-color: aquamarine;
}
.box{
width: 100%;
height: 0;
padding-bottom: 50%; /* 相对于父级宽度,也就是150px */
background-color: red;
}
<div class="content">
<div class="box"></div>
</div>
.box
中padding-bottom
的50%是相对于父容器.content
的宽度决定的,也就是150px。而且.content
也不一定是准确的px值,也可以是相对于页面的百分比值,这就适用于响应式的百分比宽度。
所以我们可以用图片的宽高比作为padding-bottom
的值提前把图片所要占用的空间撑开,然后img
绝对定位在.content
上面就可以达到提前占位的效果。
比如下面案例使用的图片宽高是300px * 450px
,那么padding-bottom
的值就可以设置为150%
。
这里为了少写一个div
,用伪类代替:
.content{
position: relative;
width: 300px;
font-size: 0; /* 消除内联元素间的间隔(空格) */
}
.content::before{
content: '';
display: block;
width: 100%; /* 400px 相对于content的width */
padding-bottom: 150%; /* 200px 相对于content的width */
background-color: red;
}
.content img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="content">
<img src="https://img1.baidu.com/it/u=2348819965,1910380145&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" alt="">
</div>
<div>下方内容下方内容下方内容</div>
可以看到在加载过程中下方内容没有从上面被挤下来,提升了用户体验。
文章来源:https://www.toymoban.com/news/detail-476674.html
大致思路就是这样,主要是使用padding-top
或者padding-bottom
的百分比用来实现占位效果 😃。文章来源地址https://www.toymoban.com/news/detail-476674.html
到了这里,关于CSS 图片加载提前占位 padding-top、padding-bottom的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!