default
menu home
图标库 注册 登录 favorite_border message help_outline
在线笔记 - 人性化网络收藏夹

无法明确指定大图的宽度width和height时,如何避免累计布局位移CLS?

style分类标签: 全部 CSS html javascript php/other IT
by: fanshome  2023-07-26 09:32(UTC)

演 示

累计布局偏移: Cumulative Layout Shift, 简称CLS,是一项web性能的重要指标,旨在避免页面渲染时,某些元素(比如图片、字体等)加载前后占位不同导致页面呈现的内容发生突然变化,降低用户使用感受。比如图片未加载前,原来是某个链接的位置,突然被加载后的图片取代,页面发生了“跳动”,用户点下去的时候就不一定是用户想要的去处。

但是,某些情况下,我们又无法直接明确指定图片的宽度和高度,比如为了自适应不同的屏幕大小,我们需要图片按屏幕宽度的百分比来呈现,这时候,就无法简单地直接明示图片的宽/高。一旦不指定图片的宽/高,那么我们就容易遇到CLS问题,因为浏览器在读取图片并加载前,不知道该预留多大位置给图片。

那么我们如何避免这个两难的局面呢?

一种比较简单的做法是给图片加上一个包围元素,指定这个包围元素的宽高比,比如宽度80%,高度40%(根据图片的宽高比计算得出),与图片的实际宽高比一致。然后把图片放入其中,指定图片宽度100%。这样,浏览器就会预留相应的并且正确的图片位置,从而避免CLS问题。

下面我们以一张大图(1920*1080,16:9)为例,演示如何具体实现。(点击页面红色“演示”按钮查看效果)

CSScontent_copy复制代码
.imgWrap{
	width: 40%;/*指定图片按屏幕宽度的40%显示*/
	height: 0;/*重要*/
	padding-bottom: 22.5%;/*计算比例(1080/1920)x40%*/
	margin: 0 auto;/*水平居中*/
	background: #ccc;
	overflow: hidden;
}
.imgWrap img{
	width: 100%;
	height: auto;
}
.buttons{
	width: 320px;
	margin: 16px auto;
	line-height: 40px;
}
button{
	font-size: 20px;
}
htmlcontent_copy复制代码
<div class='buttons'>
	<button onclick='imgLoad(0)'>模拟图片加载前</button>
	<button onclick='imgLoad(1)'>模拟图片加载后</button>
</div>
<div class='imgWrap'></div>
javascriptcontent_copy复制代码
var $=mdui.$;
function imgLoad(s){
	if(s)$('.imgWrap')[0].innerHTML="<img src='/images/coding/demo_1920x1080.jpg' alt='demo'/>";
	else $('.imgWrap')[0].innerHTML="";
}

visibility 620


- 重度网络用户必备 在线笔记
adimg
logo 发表评论

captcha
请正确填写验证码
取 消