responsively-lazy是一款非常实用的可实现响应式图片懒加载的js插件。它可以根据容器的大小来智能选择加载适合尺寸的图片，做到图片的响应式效果。并且使用它对于SEO是十分友好的。该图片懒加载插件的特点还有：

  • 响应式图片
  • 不做任何不必要的请求
  • 可以在任何支持srcset的浏览器中工作
  • 智能处理加载的合适尺寸的图片
  • 在旧的浏览器中不会破坏布局

安装

可以通过npm或bower来安装该插件。

npm install responsively-lazy
bower install responsively-lazy

使用方法

使用该图片懒加载插件需要引入responsivelyLazy.min.css和responsivelyLazy.min.js文件。

<link rel="stylesheet" href="responsivelyLazy.min.css">
<script async src="responsivelyLazy.min.js"></script>
HTML结构

为你需要进行懒加载的图片添加下面的HTML结构：

<div class="responsively-lazy" style="padding-bottom:68.44%;">
    <img alt="" src="images/2500.jpg" data-srcset="images/600.jpg 600w, images/400.jpg 400w, images/800.jpg 800w, images/1500.jpg 1500w, images/1000.jpg 1000w, images/2000.jpg 2000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
</div>

你需要自定义<div>容器的padding-bottom样式。如果你不知道图片的比例，你也可以不用<div>容器，直接使用<img>。

<img class="responsively-lazy" alt="" src="images/2500.jpg" data-srcset="images/600.jpg 600w, images/400.jpg 400w, images/800.jpg 800w, images/1500.jpg 1500w, images/1000.jpg 1000w, images/2000.jpg 2000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

关于这个插件更详细的介绍信息，请参考Lazy load responsive images。