响应式图像延迟加载JS插件：lazySizes
想必不少前端人员了解 lazyLoader 这个图像延迟加载插件，而 lazySizes 可以说是它的终极版，轻量级，不需要 jQuery 库即可使用，方法更简单，更多用途。
注：lazyLoader 图像延迟加载：是指当你网站有很多图像时，若一次性加载全部，那么网站会很慢，通过 lazyloader 插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。
lazySizes 比lazyLoader功能更多更强大，此外大小也只有5KB，并不影响图像的SEO，下面来看看使用方法。
插件名称：lazySizes
在线演示： http://afarkas.github.io/lazysizes/#examples
下载地址： https://github.com/aFarkas/lazysizes
使用教程
使用是十分简单的，并且不需要加入 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>
然而该插件还有更多的使用方式，比如让图像渐变加载，预加载低质量图像，这些都是很不错的体验，详细请浏览插件介绍页。
推荐理由
1. 优化网站加载速度同时，并能让网站节省流量；
2. 不需要其它JS库，直接引用 lazysizes.js 即可，轻量级，约5.8KB；
3. 适用响应式图像，可自动匹配图像大小，可预加载低质量图像提高体验。
交流：想结交更多有才华的设计师？请到（UI设计QQ群）列表，与50000名设计师交流设计。
设计导航：小盆友和大神都值得拥有的设计师网址导航： http://hao.shejidaren.com
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
