今天教大家如何在typecho中实现lazyload懒加载效果。顾名思义,Lazyload这个jQuery 插件,是用来缓冲加载图片的插件,可以有效减轻服务器压力,节省系统资源。但是,找了很久也没有相关的插件和教程,只能自己动手解决了。ps:我只想安安静静地写文章,非要把我变成程序员。

一、具体操作

1.引用公共库
打开你的主题目录下的footer.php,在</body>前添加以下代码:

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.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: 100,effect: "fadeIn"});
      });
</script>

如果你的主题已经引用了jquery.min.js,则不需要再添加。

2.替换代码
打开主题目录下的post.php,将

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

替换为:

<?php $content = preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"loading.gif\"\$3>\n<noscript>\$0</noscript>",$this->content); echo $content ?>

同时,将loading.gif替换为你的默认图片的地址。

3.pjax回调(未开启pjax的请忽略该条)
如果你使用了全站pjax,则需要在complete事件中添加lazyload回调函数,打开主题目录下的footer.php,搜索pjax:complete',function(){,在后面直接添加以下代码:

jQuery(function(){ jQuery("img").lazyload({threshold:100,effect: "fadeIn"});});

二、大功告成
此时,代码部署完毕。ctrl+F5强制刷新网页,打开一片有图的文章,通过审查元素可以查看图片是否进行了懒加载。