Joe主题魔改：正文内容实现图片懒加载

news2025/4/26 10:31:26

引言

有个哥们问我Joe主题的正文部分，如何同样图片懒加载，于是便研究了一下。

探索过程

因为PHP语言我用的很少，并不擅长，于是我去网上搜了一下。

方案一：用一个叫Jquery Lazyload的JavaScript脚本，我尝试了一下，并没有什么用。或者说，在Joe主题上没什么效果。也可能是因为，我只是简单的插入页面，并没有操作正确。

方案二：直接用PHP替换文章内容中的img标签为Joe所支持的懒加载样式。

这个方法听起来是可行的，但是我在 post.php 和 page.php 没有发现 $this->content;，于是我又去别的地方找了找，没有什么头绪。

但是，我突然想到一个点（因为手里没有php编辑器，只是干巴巴地看代码），Joe对短代码的实现应该有一个替换操作，毕竟要转化成html嘛。

于是找到了相关的文件，果然也不出所料。然后就简单了，用一个正则替换搞定了。

步骤

1、打开文件 /usr/themes/Joe/core/short.php

2、在 echo $content; 上加入（翻到文件最底部）

// 将图片替换成懒加载
$r1 =  '/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/iU';
$r2 = '<img data-src="$2" width="100%" class="image lazyload" src="https://static.wusuov.com/gif/2023/10/86a79700e14cccea92def5ed92960aaf.gif" $3>';
$content = preg_replace($r1, $r2, $content);