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="";
}

736

favinavi - for heavy web user Online notes

简洁有效地实现水平垂直双居中
同时实现水平和垂直方向双居中的方法网上有很多种，本人倾向于采用其中最简洁有效的方法来实现，具有比较好的通用性。具体实现的css代码如下：
CSS学习笔记：flex布局做出元素两端对齐效果
很久以前，还没有flex布局方法的时候，想要在同一行内的两个元素分两端左右对齐，应该使用float方法，左边的元素使用float:left; 右边的元素使用fl...
发现一只有趣的蜘蛛——“BSbot”
最近发现有一个有趣的蜘蛛来访，它的User Agent是这么写的： BSbot 1.1 (monthly copyright check - html/js/...
我的酱香之路
一、男人喜欢喝点酒，是一件很正常的事。我其实并不太懂酒，也不算是酒鬼，平时在自己家里基本不喝酒。现在，假如可以选择，那么我只喝酱香酒。咱们中国人，一般来说...
CSS背景图片分割之大图小用
为了提高页面加载速度，我们往往需要把一些小图标合并成一个图片文件，然后采用图片分割的方法来呈现，这很容易实现，使用background-position来设定图...
网站的页面访问量以及搜索引擎爬虫访问量的统计方法
统计页面访问量的方法有无数种，这里介绍我的“低级”方法： 1、当然是先用数据库建立一张访问统计表，每个需要统计的页面单独需要建一个字段，比如首页就用“index...