CSS图书馆 » HTML & CSS » 响应式图像延迟加载JS插件:lazySizes

响应式图像延迟加载JS插件:lazySizes

发表于: HTML & CSS. 评论 (1)
赞助商链接

想必不少前端人员了解 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. 适用响应式图像,可自动匹配图像大小,可预加载低质量图像提高体验。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。