首页 使用教程 正文内容

zblog给网站添加lazyload.js懒加载图片

哔哩 2023-12-01 14:12:29 使用教程 366
首先说明,这个是有缺点的,那就是不利于图片SEO,因为加了一个默认图片,百度爬取会认为网站全部都是一样的图片,只有浏览器触发了lazyload的命令才会进行懒加载。
我是给自己的资源网添加了,感觉图片太多同时加载会影响速度,所以就加了一个。
同时,我的模板网并不是靠网站的图片seo来获取流量的,所以,我这个网站思虑再三还是加了一个懒加载。
如何添加:
我zblogphp的模板文件include文件中是这样子的。
<img class=\"lazyload\" src=\"https://i1.78moban.com/zz/2020/3c876de21fefa.jpg\" data-src=\"{$zbp->host}zb_users/theme/{$zbp->theme}/template/timthumb.php?src={$sltu}&w={$sltww}&h={$slthh}&zc=1\" alt=\"{$article->Title}\" width=\"{$sltww}\" height=\"{$slthh}\"/>
参考的是官方说明:https://www.lazyloadjs.cn/
采用第二种方式:
<img class="lazyload" src="img/example-thumb.jpg" alt="给网站添加lazyload.js懒加载图片" data-src="img/example.jpg" alt="给网站添加lazyload.js懒加载图片" width="765" height="574">
至于如何添加,还是需要看你的网站模板是啥样的,这个肯定需要用到批量处理的,不可能手动去替换。
在网站的头部<head>中引入必须的两个js文件。
<script src="https://i1.78moban.com/aaooo/lazyload.js" type="text/javascript"></script>
<script src="https://i1.78moban.com/aaooo/lazyload.min.js" type="text/javascript"></script>
这两个文件下载可以去官网,也可以本页面底部下载。
之后再网站的footer文件中添加一段js代码:
<!--图片懒加载-->
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload();
});
</script>
全部按照我上面的搞定之后,现在返回网站刷新一下缓存试试吧。我感觉还OK。

给网站添加lazyload.js懒加载图片
 lazyload-2.x.zip
下载地址:
链接: https://pan.baidu.com/s/1asg9MQUF6aDquoVrCNBmKQ 提取码: n9cy
微信二维码