Typecho在pjax下实现图片lazyload懒加载
部署条件
- 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/
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »