TypechoJoeTheme

至尊技术网

统计
登录
用户名
密码
/
注册
用户名
邮箱

Typecho实现图片懒加载(lazyload)

2019-09-18
/
20 评论
/
2,526 阅读
/
正在检测是否收录...
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图片懒加载Typecholazyload
朗读
赞(3)
版权属于:

至尊技术网

本文链接:

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

评论 (20)
  1. 忘记了回忆 作者
    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 回复
        1. 悠悠楠杉 作者
          Windows 10 · QQ Browser
          @忘记了回忆

          可以用vscode搜索整个Joe目录文件,搜class="lazyload",大概9个文件左右

          2021-11-27 回复
          1. 忘记了回忆 作者
            Windows 10 · Google Chrome
            @悠悠楠杉

            我找到其中一行是这样:

            2021-11-27 回复
          2. 悠悠楠杉 作者
            Windows 10 · QQ Browser
            @悠悠楠杉

            把data-src换成src

            2021-11-27 回复
          3. 忘记了回忆 作者
            Windows 10 · Google Chrome
            @悠悠楠杉

            是不是把src="" 这个全部删除? 然后你说的“data-original”,这个没有找到,请问一下这具体要怎么修改呢?

            2021-11-27 回复
          4. 悠悠楠杉 作者
            Windows 10 · QQ Browser
            @悠悠楠杉

            src=""删除,把data-src换成src

            2021-11-27 回复
          5. 忘记了回忆 作者
            Windows 10 · Google Chrome
            @悠悠楠杉

            2021-11-27 回复
          6. 悠悠楠杉 作者
            Windows 10 · QQ Browser
            @悠悠楠杉

            对,是这样的

            2021-11-27 回复
          7. 忘记了回忆 作者
            Windows 10 · Google Chrome
            @悠悠楠杉

            我搜索整个目录有5个PHP文件,然后还有6个JS文件,这些全部需要修改对吗?之前有位网友告诉我懒加载的话会预先加载好图片,提升访问速度,但缺点是我不需要查看的也会被加载,造成流量消耗(这种说法对吧?)

            2021-11-27 回复
          8. 悠悠楠杉 作者
            Windows 10 · QQ Browser
            @悠悠楠杉

            不用懒加载,直接就显示原图片,带宽小反而打开速度变慢

            2021-11-27 回复
          9. 忘记了回忆 作者
            Windows 10 · Google Chrome
            @悠悠楠杉

            速度慢一些没关系(我先测试一下),我是想问,这样改了后是不是就能让访问流量小一些呢?

            2021-11-27 回复
          10. 悠悠楠杉 作者
            Windows 10 · QQ Browser
            @悠悠楠杉

            只是少loading图片的流量而已

            2021-11-27 回复
          11. 忘记了回忆 作者
            Windows 10 · Google Chrome
            @悠悠楠杉

            谢谢你的耐心解释,除了PHP,JS文件里的也同样要修改是吗?

            2021-11-27 回复
        2. 悠悠楠杉 作者
          Windows 10 · QQ Browser
          @忘记了回忆

          不过懒加载可以提高页面加载速度

          2021-11-27 回复
          1. 忘记了回忆 作者
            Windows 10 · Google Chrome
            @悠悠楠杉

            是的,但是造成主机使用流量过大,我想取消看看。

            2021-11-27 回复
  2. 忘记了回忆 作者
    Windows 10 · Google Chrome

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

    2021-12-02 回复
    1. 悠悠楠杉 作者
      Windows 10 · QQ Browser
      @忘记了回忆

      可以把图片压缩一下,还有文章的图片

      2021-12-02 回复
  3. 火喵 作者
    Windows 10 · Google Chrome

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

    2022-05-18 回复