iframe懒加载_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 插件并将其引入到你的网站上：

Step 2: 将 class=”lazyload” 添加要延迟加载的 或 即可。

data-sizes="auto"

data-src="image2.jpg"

data-srcset="image1.jpg 300w,

image2.jpg 600w,

image3.jpg 900w" class="lazyload" />

allowfullscreen=""

data-src="//www.youtube.com/embed/ZfV-aYdU4uE">

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

懒加载的方式

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

无响应默认加载

从模糊到清晰的加载

响应式加载

data-sizes="auto"

data-src="image2.jpg"

data-srcset="image1.jpg 300w,

image2.jpg 600w,

image3.jpg 900w" class="lazyload" />

iframe 的方式

allowfullscreen=""

data-src="//">

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

相关链接