2023-01-08 更新 472 阅读

记得在哪个博客看到的,说折腾博客的尽头要么就是关站要么就是成了摄影大师。那么不折腾点图集多没意思。之前一直用的固定宽高来实现占位不抖动。这种不是不能用,只是想效果更好一点的展示图集。

这里只说一下思路额,具体实现代码写的太臃肿了,就不贴了。代码当时还懂,过个几天我自己也看不懂了。

比如这个哔哔内容里面的图片就是等高不等宽布局的图集-quote

累计布局偏移

首先来说下图片占位不抖动是个怎么回事。专业术语:Cumulative Layout Shift(累计布局偏移)。通俗一点就是图片在还没加载完渲染出来的时候,由于没有提前获取到图片的宽高,文字内容给图片原本的位置给占了,然后当图片加载完毕后,就会在文本内容某处突然跳出来给文本内容挤压下去,造成文本内容坍塌现象。通常会伴随着页面闪烁。这种交互效果确实不怎么好。

图片预加载和 php 后端获取宽高

这两个法子我都试过,但是体验都不尽人意。php 后端获取宽高赋值到 img 标签上,也要消耗后台性能。打开页面速度更加延迟。获取一张图片的宽高延迟都很高,别说图集那么多图片了。等 php 都获取完所有 img 宽高,估计都 3 分钟以后才正常浏览内容。

是我太菜,这两法子肯定是可以的。

php 改造 img 内部链接结构

为了避免没有宽高的 img 直接渲染到页面。那就先解决累计布局偏移,首先从 php 改造,给 img 内的 src 链接 改为 data-src 。改造完,主题再利用 js 操作一下 dom 给重新生成一个自己想要的 img 链接结构。

function replaceImgSrc($content) {
    $pattern = '/<img(.*?)src(.*?)=(.*?)"(.*?)">/i';
    $replacement = '<img$1data-src$3="$4"$5>';
    return preg_replace($pattern, $replacement, $content);
}

我 php 很弱,不过这么几行也差不多够了。然后再将主题里的 post.phppage.php 里输出内容的代码改一下:

<?php $this->content(); ?>
// 上面的改为下面的代码
<?php echo replaceImgSrc($this->content); ?>

利用 md 引用图片格式来扩展

下面是 md 语法引用图片的格式

![alt](https://mrju.cn/img.png)

那么我们可以在这里下点功夫。直接给图片的宽高写进alt 去,然后利用 js 截取字符串再处理数据。

下面是我改造的:

![100x200-alt](https://mrju.cn/img.png)

上面只是前提准备的思路

只是为了记录下思路。代码不是每个人都适用。思路很重要。好了,水文结束。代码随便扒,反正也没配置各种前端环境加密。。。