Typecho在pjax下实现图片lazyload懒加载

效果演示链接:
http://code.ciaoca.com/jquery/lazyload/demo/

---

部署条件

• 1：需开启PJAX
• 2：加载懒加载JS，并且引入回调函数

修改post.php和page.php，找到如下代码

$this->content();

替换为(loading.svg就是你的默认加载图片)：

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

外观head加载懒加载JS：

<script type="text/javascript" src="https://ntnas.top:82/typecho/usr/plugins/YoduPlayer/js/jquery.min.js"></script>
<script type="text/javascript" src="https://ntnas.top:82/typecho/usr/plugins/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$("img.lazyload").lazyload();
</script>

外观body部分引入回调函数：

$(document).pjax('a[href^="https://ntnas.top:82/typecho/"]:not(a[target="_blank"], a[no-pjax])', {
  container: '#main',
  fragment: '#main',
  timeout: 6000
})
$(document).on('pjax:start',function(){NProgress.start();});
$(document).on('pjax:end',function()
$("img.lazyload").lazyload();//lazyload回调函数
NProgress.done();});
</script>

参考链接:
https://github.com/smileyqp/LazyLoad
https://www.w3school.com.cn/jquery/ajax_getscript.asp
https://iobiji.com/typechoshi-xian-lazyloadlan-jia-zai-wan-mei/