当前位置:博客首页 > SEO > 正文

【实测可用】网站图片延迟加载(懒加载)js文件下载及使用方法

作者: Jarvan 分类: SEO 发布时间: 2020-06-16 14:14 百度已收录

图片延迟加载有利于提升网页的打开速度,对于SEO有好处(我用谷歌网页测速评分工具测过,使用图片懒加载后,网站的测速评分提升了好几分~)

废话不多说先给个图片延迟加载的js文件的下载地址(百度网盘的,不需要下载网盘,可以直接下)

链接:https://pan.baidu.com/s/1i9g6mNrbNKE81BzdJmhJOw

提取码:fl2w

1)将js文件下载下来,放到自己网站的目录中

能在网页调用到该目录地址就行

2)在需要使用图片懒加载的网页中加入如下代码:

<script src=”你的相对or绝对目录地址\lazysizes.min.js” async></script>

3)修改需要懒加载的图片的对应代码

修改前:

<img src=”images/flower3.png” alt=””>

修改后:

<img data-src=”images/flower3.png” class=”lazyload” alt=””>

上面红色部分就是需要新增的代码,经过以上3步就可以完成图片懒加载(延迟加载)了,我亲自做过测试好用。

相关代码参考的谷歌官方:
https://web.dev/codelab-use-lazysizes-to-lazyload-images/