首页 » 建站手册 » 网站加入图片延迟加载功能最新版教程

网站加入图片延迟加载功能最新版教程

谷歌已收录,更新于2019年01月03日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

本教程用于网站开启图片延迟加载功能,俗称的懒加载,lazyload加载。开启此功能,只有用户翻到图片资源时,才会开始加载图片。网上找了很多方法,都失效了。研究了半小时,把教程发出来。

说明

主要是,网站模板single不支持图片加载功能,用网上给的各种代码都不好使。最后的解决方法是,替换模板中的文章输出函数为支持懒加载的输出函数,然后模板footer文件引入lazyload.js以及jquery库

教程

typecho类型网站,打开主题目录,找到post.php,替换代码

    <?php $this->content(); ?>

替换成如下代码

    <?php
        $content = preg_replace('/<img (.*?)src(.*?)(\/)?>/','<img $1src="loading.gif"'.$style.' data-original$2 />',$this->content);
        echo $content 
    ?>

网站加入图片延迟加载功能最新版教程
然后,打开footer.php,在</body>前插入如下代码

<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script>
<script type="text/javascript">
      jQuery(function() {          
          jQuery("img").lazyload({threshold: 200,effect: "fadeIn"});
      });
</script>

其中,jquery.min.js是引用的公共jquery库,如果模板已经引用,无需重复引用。
注:替换loading.gif为你的动态图!

网站加入图片延迟加载功能最新版教程
网站加入图片延迟加载功能最新版教程

后续

最后给几个延迟加载动态图
网站加入图片延迟加载功能最新版教程
网站加入图片延迟加载功能最新版教程

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

已有 4 条评论

  1. 浅夏 浅夏说道:

    :twisted: 如果是头图呢,换了那个模板没有这个功能太卡了

    1. 枂下 枂下说道:

      头图就不懂了,反正就是图片链接替换,看源码吧。 :shock:

      1. 浅夏 浅夏说道:

        划线那句对吧 :roll:

        1. 枂下 枂下说道:

          我也看不懂,看起来是的

返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫