78模板网分享cms建站教程,提供网站模板、网站插件、办公模板等模板教程免费学习,找模板教程就上78模板网!

zblog网站如何添加lazyload.js懒加载图片?

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

首先说明,这个是有缺点的,那就是不利于图片SEO,因为加了一个默认图片,百度爬取会认为网站全部都是一样的图片,只有浏览器触发了lazyload的命令才会进行懒加载。

我是给自己的资源网添加了,感觉图片太多同时加载会影响速度,所以就加了一个。

同时,我的资源网并不是靠网站的图片seo来获取流量的,所以,我这个网站思虑再三还是加了一个懒加载。

如何添加:

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

<img class="lazyload" src="http://www.78moban.cn/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="600" height="574">

至于如何添加,还是需要看你的网站模板是啥样的,这个肯定需要用到批量处理的,不可能手动去替换。

在网站的头部<head>中引入必须的两个js文件。

<script src="http://www.78moban.cn/aaooo/lazyload.js" type="text/javascript"></script>

<script src="http://www.78moban.cn/aaooo/lazyload.min.js" type="text/javascript"></script>

这两个文件下载可以去网站,

https://github.com/tuupola/lazyload/archive/2.x.zip  

网盘链接链接: https://pan.baidu.com/s/1CtRd3lO5iw69ZHJZ7Bqi_w 提取码: q2wv。

之后再网站的footer文件中添加一段js代码:

<!--图片懒加载-->

<script type="text/javascript" charset="utf-8">

$(function() {

$("img").lazyload();

});

</script>

全部按照我上面的搞定之后,现在返回网站刷新一下缓存试试吧。我感觉还OK。

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

首先说明,这个是有缺点的,那就是不利于图片SEO,因为加了一个默认图片,百度爬取会认为网站全部都是一样的图片,只有浏览器触发了lazyload的命令才会进行懒加载。

我是给自己的资源网添加了,感觉图片太多同时加载会影响速度,所以就加了一个。

同时,我的资源网并不是靠网站的图片seo来获取流量的,所以,我这个网站思虑再三还是加了一个懒加载。

==========

如何添加:

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

<img class="lazyload" src="http://www.78moban.cn/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="600" height="574">

至于如何添加,还是需要看你的网站模板是啥样的,这个肯定需要用到批量处理的,不可能手动去替换。

在网站的头部<head>中引入必须的两个js文件。

<script src="http://www.78moban.cn/aaooo/lazyload.js" type="text/javascript"></script>

<script src="http://www.78moban.cn/aaooo/lazyload.min.js" type="text/javascript"></script>

这两个文件下载可以去网站,也可以   下载。

之后再网站的footer文件中添加一段js代码:

<!--图片懒加载-->

<script type="text/javascript" charset="utf-8">

$(function() {

$("img").lazyload();

});

</script>

全部按照我上面的搞定之后,现在返回网站刷新一下缓存试试吧。我感觉还OK。

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

首先说明,这个是有缺点的,那就是不利于图片SEO,因为加了一个默认图片,百度爬取会认为网站全部都是一样的图片,只有浏览器触发了lazyload的命令才会进行懒加载。

我是给自己的资源网添加了,感觉图片太多同时加载会影响速度,所以就加了一个。

同时,我的资源网并不是靠网站的图片seo来获取流量的,所以,我这个网站思虑再三还是加了一个懒加载。

==========

如何添加:

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

<img class="lazyload" src="http://www.78moban.cn/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="600" height="574">

至于如何添加,还是需要看你的网站模板是啥样的,这个肯定需要用到批量处理的,不可能手动去替换。

在网站的头部<head>中引入必须的两个js文件。

<script src="http://www.78moban.cn/aaooo/lazyload.js" type="text/javascript"></script>

<script src="http://www.78moban.cn/aaooo/lazyload.min.js" type="text/javascript"></script>

这两个文件下载可以去网站,也可以   下载。

之后再网站的footer文件中添加一段js代码:

<!--图片懒加载-->

<script type="text/javascript" charset="utf-8">

$(function() {

$("img").lazyload();

});

</script>

全部按照我上面的搞定之后,现在返回网站刷新一下缓存试试吧。我感觉还OK。

源码.jpg zblog网站如何添加lazyload.js懒加载图片?  第1张

本文链接:http://78moban.cn/post/14177.html

版权声明:站内所有文章皆来自网络转载,只供模板演示使用,并无任何其它意义!

联系技术
文章删除 友链合作 技术交流群
1050177837
公众号
公众号
公众号
返回顶部