轻量级,不需要依赖jQuery,方法简单,延时加载,支持响应式图片,Nice!

lazySizes 是一个js插件,轻量级,不需要 jQuery 库即可使用,方法更简单,更多用途。
当网站有很多图像时,若一次性加载全部,那么网站会很慢,通过 lazyloader 插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端。
lazySizes 比以前用的lazyLoader功能更多更强大,此外大小也只有5KB,并不影响图像的SEO。
插件名称:lazySizes
在线演示:http://afarkas.github.io/lazysizes/#examples
下载地址: https://github.com/aFarkas/lazysizes
在线演示:http://afarkas.github.io/lazysizes/#examples
下载地址: https://github.com/aFarkas/lazysizes
使用教程
再次声明,不需要加入 jQuery 库。
Step 1: 下载 lazysizes.min.js 插件并将其引入到你的网站上:
<code class="html"><script src="lazysizes.min.js" async=""></script></code>
Step 2: 将 class=”lazyload” 添加要延迟加载的 <images>
或 <iframes>
即可。
<!— 默认方案 –> <img data-src="image.jpg" class="lazyload" />
<code class="html"><!— 响应式方案,可自动调用对应整图像尺寸 –> <img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w,image2.jpg 600w,image3.jpg 900w" class="lazyload" /></code>
<code class="html"><!– iframe 例子 –> <iframe frameborder="0″class="lazyload" allowfullscreen="" data-src="//www.youtube.com/embed/ZfV-aYdU4uE"></iframe></code>
然而该插件还有更多的使用方式,比如让图像渐变加载,预加载低质量图像,这些都是很不错的体验,详细请浏览插件介绍页。
推荐理由
- 优化网站加载速度同时,并能让网站节省流量;
- 不需要其它JS库,直接引用
lazysizes.js
即可,轻量级,约5.8KB; - 适用响应式图像,可自动匹配图像大小,可预加载低质量图像提高体验。