lazysizes.js 图片懒加载/响应式延迟加载 - 文章教程

lazysizes.js 图片懒加载/响应式延迟加载

发布于 2020-04-29 字数 3368 浏览 1829 评论 0

懒加载如今在网站中经常看到,当用户打开一个网页的时候,图片资源并不是马上加载的,当用户浏览到图片的文章,再去加载图片,能够提升整个网站的访问速度和用户体验,特别是网站的图片比较多的站点。

lazysizes.js 图片懒加载/响应式延迟加载

通过 lazysizes.js 插件就能很好解决这个问题,它可以实现图片的延迟加载,也就是说,当网页很长时,只价值用户视窗内的图片,而视窗外的图片会等到你拖动滚动条至后面才加载。这样就有效避免了图片过度网站加载慢的问题了,下面将介绍如何使用 lazysizes.js。

安装方法

npm install lazysizes --save //npm安装
bower install lazysizes --save //bower安装

或者可以直接下载 lazysizes.min.js 脚本并在您的网页中添加,如下:

< script  src="lazysizes.min.js"  async=""></ script >

开始使用

使用是十分简单的,并且不需要加入 jQuery 库。

Step 1: 下载 lazysizes.min.js 插件并将其引入到你的网站上:

<script src="lazysizes.min.js" async=""></script>

Step 2: 将 class=”lazyload” 添加要延迟加载的 <images><iframes> 即可。

<!— 默认方案 –>
<img data-src="image.jpg" class="lazyload" />
<!— 响应式方案,可自动调用对应整图像尺寸 –>
<img
data-sizes="auto"
data-src="image2.jpg"
data-srcset="image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w" class="lazyload" />
<!– iframe 例子 –>
<iframe frameborder="0″
class="lazyload"
allowfullscreen=""
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

然而该插件还有更多的使用方式,比如让图像渐变加载,预加载低质量图像,这些都是很不错的体验,详细请浏览插件介绍页。

懒加载的方式

lazysizes不需要任何JS配置,只需要在img标签中添加class=”lazyload”就可以了,目前lazysizes支持四种懒加载方式,如下。

无响应默认加载

<img data-src="img.jpg" class="lazyload"  width="500" height="500"/>

从模糊到清晰的加载

<img src="vague.jpg" data-src="clear.jpg" class="lazyload" width="500" height="500"/>

响应式加载

<img
data-sizes="auto"
data-src="image2.jpg"
data-srcset="image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w" class="lazyload" />

iframe 的方式

<iframe frameborder="0″
class="lazyload"
allowfullscreen=""
data-src="//">
</iframe>

使用 lazysizes.js 插件,不需要引用其他三方 js 库,直接使用即可,能很方便的集成到我们项目中,而且该插件体积大约 5.8KB,很轻量级。在响应式布局、移动端开发时,增强用户体验,免造成用户流量的损失。

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0