Online notes favinavi - online bookmark

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

by: fanshome 2023-07-26 09:32(UTC)

Demo

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

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

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

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

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

CSSCopy 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;
}

htmlCopy codes

<div class='buttons'>
	<button onclick='imgLoad(0)'>模拟图片加载前</button>
	<button onclick='imgLoad(1)'>模拟图片加载后</button>
</div>
<div class='imgWrap'></div>

javascriptCopy codes

var $=mdui.$;
function imgLoad(s){
	if(s)$('.imgWrap')[0].innerHTML="<img src='/images/coding/demo_1920x1080.jpg' alt='demo'/>";
	else $('.imgWrap')[0].innerHTML="";
}

1833

favinavi - for heavy web user Online notes

一个使用CSS/HTML将图像自适应屏幕的示例
在这个示例中，我们将图像的最大宽度设置为100%，并将高度设置为自动。此外，我们还添加了一个样式，以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能...
CSS3+SVG实现的带音效、会抖动的小铃铛图标特效
非常真实的抖动效果，鼠标移上去还有叮当声哦... 点“演示”按钮体验一下。
css实现图标或图片等元素镜像翻转（水平镜像、垂直镜像）
有时候会发现现成的图标很美观，但是和一般习惯不同（或者纯粹不符合个人喜好），比如“分享”图标，一般是一个箭头，但是箭头方向感觉和习惯的相反，这时就需要来个水平镜...
关于网页上的复选框checkbox的checked和value的问题
这个问题相信很多像我一样的非专业开发者遇到过，就是感觉checkbox是一个神奇的存在，为什么这么说？就是在开发网页过程中，有时候使用checkbox一切顺利，...
CSS实现在普通可滚动容器元素内的类似position:fixed悬浮固定按钮效果
有时候，我们需要在某个可滚动（scroll）的元素内实现悬浮固定按钮效果，按钮不能随着鼠标滚动而变化。在全可视窗口实现这个效果（比如顶部的悬浮菜单）比较简单，只...
Applebot是什么？
Applebot是由苹果公司开发的网络爬虫（Web Crawler），用于收集和索引互联网上的网页内容。它是苹果公司搜索引擎Apple Search的一部分，...