最后更新于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为你的动态图!

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

后续

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

- The End -