在线笔记 favinavi - 人性化网络收藏夹

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

分类标签：全部 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）为例，演示如何具体实现。（点击页面红色“演示”按钮查看效果）

CSS复制代码

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

html复制代码

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

javascript复制代码

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

678

favinavi - 重度网络用户必备在线笔记

最好用的网络收藏夹应该是什么样？
最好用的网络收藏夹应该是什么样？我们这里先明确一下讨论的前提，参考：什么是网络收藏夹/网络书签。这个问题恐怕每个人的答案都不尽相同。但是以favinavi的...
统计搜索引擎对网站地图文件或robots.txt的访问记录的一种方法
一般而言，各大搜索引擎都允许提交网站地图，例如网站根目录下的“sitemap.xml”文件，是xml格式的文本文件。当提交了网站地图后，搜索引擎蜘蛛来访时，可能...
为什么会做favinavi网络收藏夹网站？记录一下心路历程
记得最早是在2007年，那时工作需要，经常用浏览器上网查资料、访问工作网站等等。经常遇到一个问题，就是白天工作时看到一个网站的某篇文章很有用，在浏览器设为了书签...
使用基于Cookie-Free域名加载CSS时，解决字体文件无法加载的问题
当使用基于Cookie-Free域名加载CSS时，字体文件无法加载的问题通常是因为浏览器政策所导致的。这个问题与字体文件资源和浏览器的同源策略有关。在Web...
家用服务器proxmox 7.3开启samba共享目录
大家知道，proxmox本身是debian系统，所以直接在debian系统安装samba服务即可开启共享，windows和linux、android、macOS...
了解onenav
https://blog.xiaoz.org/archives/16772