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

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

比如这个哔哔内容里面的图片就是等高不等宽布局的图集-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.php 和 page.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)

上面只是前提准备的思路

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