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
如果您觉得我的文章有帮助,请随意赞赏!