default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

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

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-07-26 09:32(UTC)

Demo

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

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

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

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

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

CSScontent_copyCopy codes
.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_copyCopy codes
<div class='buttons'>
	<button onclick='imgLoad(0)'>模拟图片加载前</button>
	<button onclick='imgLoad(1)'>模拟图片加载后</button>
</div>
<div class='imgWrap'></div>
javascriptcontent_copyCopy codes
var $=mdui.$;
function imgLoad(s){
	if(s)$('.imgWrap')[0].innerHTML="<img src='/images/coding/demo_1920x1080.jpg' alt='demo'/>";
	else $('.imgWrap')[0].innerHTML="";
}

visibility 1536


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel