Typecho给文章内图片添加懒加载及图片描述



本文记录 typecho 给文章内图片添加懒加载功能。顺便实现给文章内图片添加类名 class,以及给文章内图片下方增加图片描述。


今天尝试了一下给文章内图片添加懒加载功能,因文章内的图片是直接用 Markdown 格式写入的,一张张修改添加有点不大现实。最后尝试修改了一下 typecho 的源文件,操作步骤如下:

修改 HyperDown.php

修改程序文件 var/Utils/HyperDown.php的第 496 与第 508 行关于 img 的部分。

496 行原文如下:

"<img src=\"{$url}\" alt=\"{$title}\" title=\"{$title}\">"

增加一个 class 名,增加懒加载功能,增加图片下方描述:

"<img class=\"lazyload\" src=\"/usr/themes/cactus/images/loading.gif\" data-original=\"{$url}\" alt=\"{$title}\" title=\"{$title}\">
<br>
<center>图:{$title}</center>"

508 行用同样的格式增加一个类名,增加懒加载功能,增加图片下方描述;508 行原文如下:

 "<img src=\"{$this->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\">"

增加一个 class 名,增加懒加载功能,增加图片下方描述:

 "<img class=\"lazyload\" src=\"/usr/themes/cactus/images/loading.gif\" data-original=\"{$this->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\">
<br>
<center>图:{$escaped}</center>"
以上代码中的 " loading.gif " ,替换成您自己的加载动图路径!类名 " lazyload " 可以在自己的 CSS 中自定义您想要的样式。

修改 post.php

主题模板文件 post.php 或者 single.php 文件的文章内容输出代码 <?php parseContent($this); ?> 前一行添加下面代码:

<script src="//cdn.staticfile.org/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<script>
setTimeout(function() {$("img").lazyload({effect: "fadeIn", threshold: 100, failurelimit: 2});},100);</script>

修改完成后保存退出,我们就发现文章图片增加了三个功能。
1、增加了class="lazyload"
2、增加了懒加载,
3、增加了图片描述。

效果展示

前端代码如下:

<p>
<center>
<img class="lazyload" src="/usr/themes/cactus/images/loading.gif" data-original="https://pic.yxjnotes.top/blog/2023/10/03/pPOKVYD.jpg" alt="水库二坝钓鱼" title="水库二坝钓鱼">
<br>
<center>图:水库二坝钓鱼</center>
</center>
</p>

前端效果如下:

typecho文章图片懒加载前端效果

图:typecho文章图片懒加载前端效果

好了,小伙伴们。快去动手试试吧!

存在问题

与图片灯箱放大效果冲突,目前不知道怎么解决,探索中……

冲突说明:懒加载图片 src 指向加载占位动图, data-original 指向真实图片地址;但是图片灯箱只能用 src ,换成 data-original 后无效果。

图片灯箱放大效果代码如下:

<link rel="stylesheet" href="<?php cjUrl('css/lightbox.min.css'); ?>">
<script src="<?php cjUrl('js/lightbox.min.js'); ?>"></script>
<script>
    $('#post-content img').wrap(function () {
    return '<a href="' + this.src + '" title="' + this.alt + '" data-lightbox="roadtrip"></a>';
        });
</script>

有空的大佬可以帮我研究研究,拜谢!



 赏 
感谢您的支持,我会继续努力哒!
支付宝收款码
tips
(*) 8 + 4 =
共 5 条评论, 9 次评论点赞。快来参与吧!
    2023年11月07日 广东省茂名市 发自Windows 10 回复 3

    我是使用js写的,感觉还可以。就是没有描述这个功能我还没有实现。

      2023年11月08日 湖北省黄石市 发自Windows 10 回复 2

      整个友链,如何? 你那不能留言呢,,报错500

        2023年11月08日 广东省汕头市 发自Android 回复 1

        好几个月没有动了,晚上回去测试一下。

    2023年10月04日 安徽省滁州市 发自Android 回复 2

    现有的图片懒加载js都有个问题,每个链接会发送2次请求。火狐浏览器还好,第二次会直接读取第一次的缓存,但是chrome系列的浏览器都是发送2次,这不是反而增加服务器负担吗我想

      2023年10月04日 江西省 发自Windows 10 回复 1

      大佬,这么深奥啊,小白不懂呢