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文章图片懒加载前端效果

好了，小伙伴们。快去动手试试吧！

存在问题

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

冲突说明：懒加载图片 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>

有空的大佬可以帮我研究研究，拜谢！

---

文章标题：Typecho给文章内图片添加懒加载及图片描述
分类标签：折腾，typecho，主题模板，工具代码，图片懒加载
文章链接：https://www.80srz.com/posts/1377.html
许可协议： 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)