handsome主题是支持懒加载图片的,只不过作者为了性能设置的懒加载图片为1像素的灰色base64图片,如果我们想更换图片的加载效果,那么,我们可以通过修改这个base64图片的方式来达到我们的目的。
有位朋友评论数次询问如何替换,但是被博客的评论机制过滤了,后台也看不到,不过我收到了server酱的通知,也联系不到这位朋友,希望有缘能再看到这篇文章吧。
分析源代码
本文基于handsome7.3.1pro,其余版本可参考修改。
首先,我们要找到那个一像素的占位图片在哪里,我们通过index.php文件下的首页输出文章代码块,可以知道文章是使用Content.php
内的echoPostList()
方法实现的,而我们的文章列表里面是有图片的,所以,我们继续深挖源代码。
打开libs下的Content.php
,按下ctrl+f打开搜索echoPostList
,然后我们找到了文章列表的输出方法。
然后我们又发现了这里写的大部分是参数,然后文章列表又通过另一个方法returnPostItem()
输出出来
然后我们继续搜索,找到这个方法
然后观察一番,然后就找到了懒加载图片的结构
通过这个变量,我们找到了下一个文件的方法
然后找到下面方法
最后,我们找到了出来处理占位图片的方法
然后打开CDN.php,这里两个就是默认的占位图片
替换教程
首先我们可以找一个动图,将这个图片转换成base64的图片形式
https://c.runoob.com/front-end/59
然后复制这个转换后的图片编码
然后打开lib目录下方的CDN.php,在第30行左右的地方有以下代码
我们在这两行的代码后面新定义一个常量:
const NORMAL_PLACEHOLDER_GIF = '这里是转换后的编码'
改好之后就如下图所示:
修改引用的占位常量
打开Utils.php,找到大概660左右有以下方法:
当然也可以直接搜索choosePlaceholder($options)
如果你使用透明模式,那么把OPACITY_PLACEHOLDER
修改成NORMAL_PLACEHOLDER_GIF
,如果你使用普通的模式,那么就把NORMAL_PLACEHOLDER
修改为NORMAL_PLACEHOLDER_GIF
修改完成记得保存一下哦!
然后前台刷新一下,查看效果吧!
16 条评论
文章很棒 欢迎回访我哦
我发现,我改完以后手机端和你不太一样,就是网页必须手动划一下才能显示图片,而你现在的网站只要刷新,不用滑动就能显示图片,我感觉是主题的lazyload问题
找到原因了,别的插件问题
你这响应速度还是挺快的啊
速度为王,嘿嘿
感谢分享先收藏起来有空研究
hi
hi
是 Base64,不是 Bash64。你这个眼睛......
哈哈哈哈,我改一下
没咋看明白,有懒加载改没有了?
这个是针对handsome主题的,把加载前的灰色图片改成现在的loading GIF,哈哈
66666厉害
过奖了OωO
我也买了这款主题,不过那个博客从来没有图片!感觉买了有些浪费了
这个主题用来写文字博客,其实也很不错的