lazysizes.js响应式图像延迟加载js的使用方法

发布时间:2024-03-28 11:01

我们在做wordpress主题开发时,为了实现图片的加载变快,避免不了要使用图像的懒加载技术,这里我推荐使用lazysizes.js,因为lazySizes是轻量级,不需要jQuery库,而且大小只有5kb,使用方法更简单。

图像懒加载

我先解释一下什么是图像懒加载

lazyLoader 图像延迟加载:是指当你网站有很多图像时,若一次性加载全部,那么网站会很慢,通过 lazyloader 插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端。

插件名称:lazySizes

在线演示:http://afarkas.github.io/lazysizes/#examples

下载地址: https://github.com/aFarkas/lazysizes

使用教程

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

一、安装lazysizes:

npm install lazysizes –save //npm安装

bower install lazysizes –save //bower安装

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


二、懒加载方式:

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

1、无响应默认加载:


2、从模糊到清晰的加载:


3、响应式加载:


4、iframe的方式:


欢迎关注我的公众号“xx主题网”,原创技术文章第一时间推送。

文章来源:https://www.xxzhuti.com/320.html


ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号