经验教程

Typecho实现图片懒加载(lazyload)

悠悠楠杉

2019-09-18

20 评论

7,978 阅读

正在检测是否收录...

09/18

基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。

对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。

注意事项：
需要真正实现图片延迟加载，必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同，则只是一个特效而已，并不达到延迟加载的功能。

1、修改 HTML 代码中需要延迟加载的 img 标签

<img class="lazy" src="img/loading.gif" data-original="example.jpg">
// 或者
<img class="lazy" data-original="example.jpg">

Typecho在主题文件 index.php 找到:

<img src="<?php echo articleThumb($this);?>" alt="<?php $this->title(); ?>">

替换:

<img class="lazy" src="<?php $this->options->themeUrl('images/loading.gif'); ?>" data-original="<?php echo articleThumb($this);?>" alt="<?php $this->title(); ?>">

2、在主题文件 footer.php 的标签前添加如下代码：

这里主要是引入jquery.js和jquery.lazyload.js，并初始化lazyload的图片显示样式。
注意：因主题自带jquery.js，故这里未做引入！占位符图片请替换为你的gif图片地址。

<!--引入jquery.lazyload.js-->
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<script>
    //js出始化lazyload并设置图片显示方式
    $(function() {$("img.lazy").lazyload({effect: "fadeIn", threshold: 200});});
    //pjax开启后的pjax回调
    $(document).on('pjax:complete', function() {
            $("img.lazy").lazyload({
            effect: "fadeIn",
            threshold: 200
        });
    });
</script>

js 图片懒加载 Typecho lazyload

朗读

版权属于：

至尊技术网

本文链接：

https://www.zzwws.cn/archives/1128/（转载时请注明本文出处及文章链接）

作品采用：

《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

忘记了回忆作者
Windows 10 · Google Chrome

你好，我和你用同样的主题，默认有这种懒加载图片，造成流量很大，请问一下想取消这种懒加载机制，你知道要怎么取消吗？

2021-11-27 回复
1. 悠悠楠杉作者
  Windows 10 · QQ Browser
  
  @忘记了回忆
  
  你可以找到class="lazyload"把src=""删除，然后在把data-original改成src
  
  2021-11-27 回复
  1. 忘记了回忆作者
    Windows 10 · Google Chrome
    
    @悠悠楠杉
    
    你说的这项是指哪个页面，是index.php 还是 footer.php
    
    2021-11-27 回复
    
    悠悠楠杉作者
    Windows 10 · QQ Browser
    
    @忘记了回忆
    
    可以用vscode搜索整个Joe目录文件，搜class="lazyload"，大概9个文件左右
    
    2021-11-27 回复
    
    忘记了回忆作者
    Windows 10 · Google Chrome
    
    @悠悠楠杉
    
    我找到其中一行是这样：
    
    2021-11-27 回复
    
    悠悠楠杉作者
    Windows 10 · QQ Browser
    
    @悠悠楠杉
    
    把data-src换成src
    
    2021-11-27 回复
    
    忘记了回忆作者
    Windows 10 · Google Chrome
    
    @悠悠楠杉
    
    是不是把src="" 这个全部删除？然后你说的“data-original”，这个没有找到，请问一下这具体要怎么修改呢？
    
    2021-11-27 回复
    
    悠悠楠杉作者
    Windows 10 · QQ Browser
    
    @悠悠楠杉
    
    src=""删除，把data-src换成src
    
    2021-11-27 回复
    
    忘记了回忆作者
    Windows 10 · Google Chrome
    
    @悠悠楠杉
    
    2021-11-27 回复
    
    悠悠楠杉作者
    Windows 10 · QQ Browser
    
    @悠悠楠杉
    
    对，是这样的
    
    2021-11-27 回复
    
    忘记了回忆作者
    Windows 10 · Google Chrome
    
    @悠悠楠杉
    
    我搜索整个目录有5个PHP文件，然后还有6个JS文件，这些全部需要修改对吗？之前有位网友告诉我懒加载的话会预先加载好图片，提升访问速度，但缺点是我不需要查看的也会被加载，造成流量消耗（这种说法对吧？）
    
    2021-11-27 回复
    
    悠悠楠杉作者
    Windows 10 · QQ Browser
    
    @悠悠楠杉
    
    不用懒加载，直接就显示原图片，带宽小反而打开速度变慢
    
    2021-11-27 回复
    
    忘记了回忆作者
    Windows 10 · Google Chrome
    
    @悠悠楠杉
    
    速度慢一些没关系（我先测试一下），我是想问，这样改了后是不是就能让访问流量小一些呢？
    
    2021-11-27 回复
    
    悠悠楠杉作者
    Windows 10 · QQ Browser
    
    @悠悠楠杉
    
    只是少loading图片的流量而已
    
    2021-11-27 回复
    
    忘记了回忆作者
    Windows 10 · Google Chrome
    
    @悠悠楠杉
    
    谢谢你的耐心解释，除了PHP，JS文件里的也同样要修改是吗？
    
    2021-11-27 回复
    
    悠悠楠杉作者
    Windows 10 · QQ Browser
    
    @忘记了回忆
    
    不过懒加载可以提高页面加载速度
    
    2021-11-27 回复
    
    忘记了回忆作者
    Windows 10 · Google Chrome
    
    @悠悠楠杉
    
    是的，但是造成主机使用流量过大，我想取消看看。
    
    2021-11-27 回复
忘记了回忆作者
Windows 10 · Google Chrome

你好，我把PHP和JS里的那段话都删除了，可流量还是比之前的主题大，日IP 500左右的情况下，旧主题每天700M左右，这款Joe主题大约要1.2G多，请问一下是不是我哪里修改不对？后台数据查看都是png图片访问量大，看来还是加载了很多图片造成的。

2021-12-02 回复
1. 悠悠楠杉作者
  Windows 10 · QQ Browser
  
  @忘记了回忆
  
  可以把图片压缩一下，还有文章的图片
  
  2021-12-02 回复
火喵作者
Windows 10 · Google Chrome

我也是joe，不过是7.0的，文章页的图片想加懒加载找不到img标签在哪

2022-05-18 回复

至尊技术网

Typecho实现图片懒加载(lazyload)

人生倒计时

最新回复

标签云