handsome主题是支持懒加载图片的，只不过作者为了性能设置的懒加载图片为1像素的灰色base64图片，如果我们想更换图片的加载效果，那么，我们可以通过修改这个base64图片的方式来达到我们的目的。

有位朋友评论数次询问如何替换，但是被博客的评论机制过滤了，后台也看不到，不过我收到了server酱的通知，也联系不到这位朋友，希望有缘能再看到这篇文章吧。

分析源代码

本文基于handsome7.3.1pro，其余版本可参考修改。

首先，我们要找到那个一像素的占位图片在哪里，我们通过index.php文件下的首页输出文章代码块，可以知道文章是使用Content.php内的echoPostList()方法实现的，而我们的文章列表里面是有图片的，所以，我们继续深挖源代码。

打开libs下的Content.php,按下ctrl+f打开搜索echoPostList，然后我们找到了文章列表的输出方法。

image-20210117141113902

然后我们又发现了这里写的大部分是参数，然后文章列表又通过另一个方法returnPostItem()输出出来

image-20210117141535937

然后我们继续搜索，找到这个方法

image-20210117141732716

然后观察一番，然后就找到了懒加载图片的结构

image-20210117141718196

通过这个变量，我们找到了下一个文件的方法

image-20210117141900899

然后找到下面方法

image-20210117142021732

image-20210117142505656

最后，我们找到了出来处理占位图片的方法

image-20210117142606912

然后打开CDN.php，这里两个就是默认的占位图片

image-20210117142741621

替换教程

首先我们可以找一个动图，将这个图片转换成base64的图片形式

https://c.runoob.com/front-end/59

然后复制这个转换后的图片编码

然后打开lib目录下方的CDN.php，在第30行左右的地方有以下代码

image-20210117143041495

我们在这两行的代码后面新定义一个常量：

const NORMAL_PLACEHOLDER_GIF = '这里是转换后的编码'

改好之后就如下图所示：

image-20210117143211972

修改引用的占位常量

打开Utils.php,找到大概660左右有以下方法：

当然也可以直接搜索choosePlaceholder($options)

image-20210117143329172

如果你使用透明模式，那么把OPACITY_PLACEHOLDER修改成NORMAL_PLACEHOLDER_GIF，如果你使用普通的模式，那么就把NORMAL_PLACEHOLDER修改为NORMAL_PLACEHOLDER_GIF

修改完成记得保存一下哦！

然后前台刷新一下，查看效果吧！

版权声明
本文作者珂泽
文章来源风也雨忆笙
原文链接
转载说明非特殊说明文章均为原创，页脚已标识是否允许转载，转载请注明出处！感谢您的支持！
微信公众号
最后修改：2021 年 01 月 19 日 09 : 37 PM
© 允许规范转载
如果您觉得我的文章有帮助，请随意赞赏！