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

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

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

版权属于：珂泽

本文链接：https://blog.kaygb.com/738.html

本站原创文章均采用 署名-非商业性使用-相同方式共享 4.0 国际 （CC BY-NC-SA 4.0) 进行许可。转载时须注明出处和链接地址。

微信公众号
最后修改：2021 年 01 月 19 日 09 : 37 PM
© 允许规范转载
如果您觉得我的文章有帮助，请随意赞赏！