想必不少前端人员了解 lazyLoader 这个图像延迟加载插件,而 lazySizes 可以说是它的终极版,轻量级,不需要 jQuery 库即可使用,方法更简单,更多用途。

注:lazyLoader 图像延迟加载:是指当你网站有很多图像时,若一次性加载全部,那么网站会很慢,通过 lazyloader 插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端。

响应式图片延迟加载JS插件lazySizes.js(图1)

lazySizes 比lazyLoader功能更多更强大,此外大小也只有5KB,并不影响图像的SEO,下面来看看使用方法。

插件名称:lazySizes
在线演示: http://afarkas.github.io/lazysizes/#examples
下载地址:  https://github.com/aFarkas/lazysizes