Lazysizes.js 图片懒加载的使用方法详解
摘要
官方介绍:
**lazysizes **是一种快速(无垃圾),对SEO友好且可自动初始化的lazyloader,用于图像(包括响应图像picture
/ srcset
),iframe,脚本/小部件等。它还通过区分关键视图元素和近视图元素来优先分配资源,以使感知性能更快。
它也可能成为您集成响应式图像的第一工具。它可以自动计算sizes
响应图像的属性,它允许您media
与CSS共享对属性的媒体查询,从而帮助将布局(CSS)与内容/结构(HTML)分开,并使响应图像集成到任何环境中都非常简单。它还包括一组可选插件,以进一步扩展其功能。
特色功能:
-
自动检测任何Web环境中当前和将来的lazyload元素的可见性更改:该脚本用作通用,自初始化,自配置和自毁组件,并检测任何当前和将来的图像/ iframe的可见性更改无论元素是通过用户滚动,通过CSS动画触发
:hover
还是通过任何JS行为(旋转木马,滑块,无限滚动,砖石,同位素/过滤/排序,AJAX,SPA …)触发,CSS元素都会自动显示。它还可以自动与任何JS- / CSS- / Frontend-Framework(jQuery mobile,Bootstrap,Backbone,Angular,React,Ember(也请参阅attrchange / re-initialization扩展)一起使用。 -
面向未来:它直接包含标准的响应式图像支持(
picture
和srcset
) -
关注点分离:对于响应图像支持,它添加了自动
sizes
计算功能,还为媒体查询功能添加了别名。如果添加带有CSS的可滚动容器(溢出:自动)或创建包含图像的大型菜单,则也不需要更改JS。 -
性能:它基于高效的最佳实践代码(运行时和网络),以60fps的速度无垃圾地工作,并且可以与CSS和JS繁重的页面或Web应用程序上的数百个图像/ iframe一起使用。
-
可扩展:它提供JS和CSS钩子,以在视图回调或效果中扩展具有任何类型的延迟加载,延迟实例化的延迟大小(另请参见可用的插件/片段)。
-
智能预取/智能资源优先级区分:lazysizes预取/预加载附近的视图资产,改善用户体验,但仅在浏览器的网络空转(另见
expand
,expFactor
和loadMode
选项)。通过这种方式,视图元素的加载速度更快,并且接近视图的图像在进入视图之前就被延迟加载。 -
轻巧但成熟的解决方案:lazysizes在轻巧和快速,可靠的解决方案之间具有适当的平衡
-
SEO改进:lazysizes不会从Google隐藏图像/资产。无论您使用哪种标记模式。Google不会滚动/与您的网站互动。lazysizes检测用户代理是否能够滚动,如果不能滚动,则立即显示所有图像。
补充
关于Lazysizes SEO改进 这一点上我不明白它是如何做到这样点的,从爬虫的角度来讲 爬虫并不会执行脚本,而 lazysizes 又是脚本。所以很费解,目前个人猜测,它这里所说的 Google 是一个服务端浏览器它能够执行且渲染页面
相关链接
使用说明
安装
下载
1、直接下载 Lazysizes.min.js 脚本
2、yarn 或 npm、bower 下载
yarn add lazysizes --save
npm install lazysizes --save
bower install lazysizes --save
引入
<script src="lazysizes.min.js" async=""></script>
Or
import 'lazysizes'; // 导入插件
import 'lazysizes/plugins/parent-fit/ls.parent-fit'; // 注意:切勿从npm包中导入/获取* .min.js文件
使用示例
从API反面来讲解 Lazysizes 不是很好讲,所以我采用示例的方式来给大家介绍 Lazysizes 的功能
懒加载(延时加载)
当资源在可视区域或接近可视区域时再加载
(官方说明)智能预取/智能资源优先级区分:lazysizes预取/预加载附近的视图资产,改善用户体验,但仅在浏览器的网络空转(另见expand
,expFactor
和loadMode
选项)。通过这种方式,视图元素的加载速度更快,并且接近视图的图像在进入视图之前就被延迟加载
API
属性 | 值 |
---|---|
class | lazyload |
data-src | 图片链接 |
示例代码
<img class="lazyload" data-src='https://placehold.it/600x300//f00?text=BaymaxCSDN 1-懒加载' alt=''/>
<iframe class="lazyload" data-src="//www.youtube.com/embed/ZfV-aYdU4uE"></iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1-懒加载</title>
</head>
<body>
<div style="height: 2000px"></div>
<img class="lazyload" data-src='https://placehold.it/600x300//f00?text=BaymaxCSDN 1-懒加载' alt=''/>
<div style="height: 1000px"></div>
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
</body>
</html>
效果图
补充
通过效果图我们可以看到,当图片或者iframe接近可视区域时,客户端才发起对应的资源请求。
响应式图像 data-srcset
与结合 data-src
如果您想使用响应式图像来支持浏览器,但又不想包含polyfill,只需将您data-srcset
的data-src
属性与属性结合即可。
注意:由于data-src
“ Read-Later”应用程序和其他工具(例如“固定”按钮)也会拾取,因此,如果您使用polyfill,则此模式也很有意义。如果您不使用polyfill,建议第一个候选图像与后备匹配src
。
上面是官方的说明,老实说我看不大懂官方的这个说明,所以只能遵从小平爷爷的祖训,通过实践来践行这个功能。
API
属性 | 值 |
---|---|
class | lazyload |
data-srcset | 图片集 |
data-src | 图片链接 |
注意:
1、data-src
这个属性并不影响图片的响应式,目前无法确认的它的主要作用是什么(data-src的值最终会赋值给img的src属性,所以我目前认为其作用是优化图片可读性)
2、官方文档 我注意到官方文档会在 data-srcset
的值前面会再插入一条与data-src
相同的链接,但插不插入都不影响响应式,且在官方文档的后续示例里面也并没用在插入该链接,所以我觉得应该按照官方后续示例的写法,仅将其放在第一位,但不需要重复插入
示例代码
<img
class="lazyload"
data-src="https://placehold.it/600"
data-srcset="https://placehold.it/600 600w,
https://placehold.it/220 220w,
https://placehold.it/300 300w,
https://placehold.it/600 600w,
https://placehold.it/900 900w"
/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2-响应式图片</title>
<style>
img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="img-wrap">
<img
class="lazyload"
data-src="https://placehold.it/600"
data-srcset="https://placehold.it/600 600w,
https://placehold.it/220 220w,
https://placehold.it/300 300w,
https://placehold.it/600 600w,
https://placehold.it/900 900w"
/>
</div>
<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
</body>
</html>
效果图
效果图就不用我去截图了,你们想象下也就知道
img 的 宽度 (w) | 显示的图片 |
---|---|
w <= 220 | https://placehold.it/220 |
220 < w <= 300 | https://placehold.it/300 |
300 < w <= 600 | https://placehold.it/600 |
600 < w | https://placehold.it/900 |
补充
这里有一点需要补充一下,它的响应式图片具有一个缓存图片的优先级。它在加载图片的时候会先读取缓存图片。例如:它读取到本地缓存有 https://placehold.it/900
的图片(srcset最大值对应的图片),那么无论当前图片尺寸为多少,它都会显示这张图片
LQIP 模糊图像占位符 模糊图像技术
如果您使用的是LQIP(低质量图像占位符)模式,只需将低质量图像添加为src
API
属性 | 值 |
---|---|
class | lazyload |
src | 占位图片链接 |
data-src | 图片链接 |
示例代码
<img
class="lazyload"
src="https://placehold.it/300x150//ff0000?text=Baymaxcsdn"
data-src='https://cdn.shopify.com/s/files/1/0449/5491/0874/files/sl-1.png'
/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-LQIP/模糊图像占位符/模糊图像技术</title>
</head>
<body>
<img
class="lazyload"
src="https://placehold.it/300x150//ff0000?text=Baymaxcsdn"
data-src='https://cdn.shopify.com/s/files/1/0449/5491/0874/files/sl-1.png'
style="max-width: 100%;"
/>
<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
</body>
</html>
效果图
补充
根据上图效果,我可以明显知道的 src
的图片起到了占位的作用(注意:src的图片会最先加载)。
利用 LQIP技术 我可以用来做 加载动画(不建议使用这个来做加载动画) 或 模糊/淡入效果。具体实现方法可以参考官方文档
模糊/淡入效果 可以使用 Lazysizes 的扩展插件 lazysizes Blur Up 来实现( lazysizes Blur Up 案例),也可以自己结合 CSS动画 来实现。
现代透明srcset图案(延时加载 src)
将普通src
属性与透明或低质量图像组合为srcset
值和data-srcset
属性。这样,现代浏览器将在不加载src
属性的情况下进行延迟加载,而所有其他浏览器将仅回src
退到初始属性(没有lazyload)。
根据 [LQIP 模糊图像占位符 模糊图像技术](#LQIP 模糊图像占位符 模糊图像技术) 我们可以知道,src
起到占位符的作用,但是它不会进行懒加载。现代透明srcset图案 便是用来解决这个问题
API
属性 | 值 |
---|---|
class | lazyload |
src | 占位图片链接 |
data-src | 图片链接 |
srcset | 透明图片Bate64 |
透明图片 Bate64 : data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
示例代码
<img
src="https://placehold.it/600"
srcset="https://cdn.shopify.com/s/files/1/0449/5491/0874/files/sl-1.png"
data-srcset="https://placehold.it/600 600w,
https://placehold.it/220 220w,
https://placehold.it/300 300w,
https://placehold.it/900 900w"
class="lazyload" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4-现代透明srcset图案</title>
<style>
img {
max-width: 100%;
}
</style>
</head>
<body>
<div>
<div style="height: 1600px"></div>
<img
src="https://placehold.it/600"
srcset="https://cdn.shopify.com/s/files/1/0449/5491/0874/files/sl-1.png"
data-srcset="https://placehold.it/600 600w,
https://placehold.it/220 220w,
https://placehold.it/300 300w,
https://placehold.it/900 900w"
class="lazyload" />
</div>
<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
</body>
</html>
CSS API (加载动画)
lazysizeslazyloading
在图像加载时添加类,在图像加载后立即添加类lazyloaded
。这可以用来添加加载动画(揭幕效果)
API
CSS 类名 | 阶段 |
---|---|
lazyload | 图片未加载 |
lazyloading | 图片加载中 |
lazyloaded | 图片加载结束 |
ls-is-cached、lazyloaded | 图片加载成功 |
仅 lazyloaded | 图片加载失败 |
示例代码
利用上述 API 我们可以用其来做加载动画,当然不仅仅可以用来做加载动画,可以用来做其他效果如淡入效果等,具体的看你个人需要和发挥
.lazyload {
opacity: 0;
}
.lazyloading {
opacity: 1;
transition: opacity 300ms;
background: #f7f7f7 url(../assets/loading.svg) no-repeat center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1-懒加载</title>
<style>
.lazyload {
opacity: 0;
}
.lazyloading {
opacity: 1;
transition: opacity 300ms;
background: #f7f7f7 url(../assets/loading.svg) no-repeat center;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<div style="width: 800px;">
<img class="lazyload" data-src='https://cdn.shopify.com/s/files/1/0449/5491/0874/files/sl-1.png' alt=''/>
</div>
<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
</body>
</html>
其他问题
Noscript模式(Javascript禁用问题处理)
如果担心禁用JavaScript,则可以将此简单模式与noscript
元素内的图像结合使用。
代码
<style>
.no-js img.lazyload {
display: none;
}
</style>
<!-- noscript pattern -->
<noscript>
<img src="image.jpg" />
</noscript>
<img src="transparent.jpg" data-src="image.jpg" class="lazyload" />
补充
这里我就不多做解释,看代码相信你也能看懂
结语
目前 关于 Lazysizes 的使用先写到这里。Lazysizes 的功能远不止这些,但有了这些基本也能解决你在图片加载的问题,至于其他功能后面再继续为大家补充
Script,则可以将此简单模式与noscript
元素内的图像结合使用。
代码
<style>
.no-js img.lazyload {
display: none;
}
</style>
<!-- noscript pattern -->
<noscript>
<img src="image.jpg" />
</noscript>
<img src="transparent.jpg" data-src="image.jpg" class="lazyload" />
补充
这里我就不多做解释,看代码相信你也能看懂
结语
目前 关于 Lazysizes 的使用先写到这里。Lazysizes 的功能远不止这些,但有了这些基本也能解决你在图片加载的问题,至于其他功能后面再继续为大家补充