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

技术 2020-10-13 37 1

首先说明，这个是有缺点的，那就是不利于图片SEO，因为加了一个默认图片，百度爬取会认为网站全部都是一样的图片，只有浏览器触发了lazyload的命令才会进行懒加载。我是给自己的资源网添加了，感觉图片太多同时加载会影响速度，所以就加了一个。同时，我的资源网并不是靠网站的图片seo来获取流量的，所以，我这个网站思虑再三还是加了一个懒加载。 ==========

如何添加：

我zblogphp的模板文件include文件中是这样子的。

<img class="lazyload" src="https://i1.a.zyooo.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" data-src="img/example.jpg" width="765" height="574">

至于如何添加，还是需要看你的网站模板是啥样的，这个肯定需要用到批量处理的，不可能手动去替换。在网站的头部<head>中引入必须的两个js文件。

<script src="https://i1.a.zyooo.com/aaooo/lazyload.js" type="text/javascript"></script>
<script src="https://i1.a.zyooo.com/aaooo/lazyload.min.js" type="text/javascript"></script>

这两个文件下载可以去官网，也可以 [button url="https://github.com/tuupola/lazyload/archive/2.x.zip" types="down"]点击[/button] 下载。之后再网站的footer文件中添加一段js代码：

<!--图片懒加载-->
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload();
});
</script>

全部按照我上面的搞定之后，现在返回网站刷新一下缓存试试吧。我感觉还OK。给网站添加lazyload.js懒加载图片

正文结束

# lazyload.js # 图片懒加载

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

如何添加：

采用第二种方式：

相关推荐

评论区