TYPECHO文章页/独立页实现lazyload懒加载完美

LeslieLin • • 编程技术
阅读量 0 次 • 评论量 0 个

前言

这个也是我在完善主题的时候，实现的一个小方法~

首先

引用公共库

在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">
  $("img.lazyload").lazyload();
</script>

替换代码

编辑post.php和page.php，找到如下代码

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

替换为

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

其中loading.svg就是你的默认加载图片
PJAX回调（未开启PJAX的请忽略）
如果使用了全站PJAX，则需要在complete事件中添加lazyload回调函数，打开主题目录下的footer.php，搜索pjax:complete',function(),添加如下代码

$("img.lazyload").lazyload();

喵~