svip

此插件可直接引入lazysizes即可
<script src="lazysizes.min.js"></script>
  延迟加载(lazy load)是(也称为懒加载)Hibernate3关联关系对象默认的加载方式，延迟加载机制是为了避免一些无谓的性能开销而提出来的，所谓延迟加载就是当在真正需要数据的时候，才真正执行数据加载操作。
  浏览器加载过程中，由于图片过多导致加载速度过慢，那么我们只需要在“看得见”的地方加载图片，而“看不见”的地方会跟随滚动条的滚动而加载。

step1 默认加载
<img data-src="moren.jpg" class="lazyload"  width="500" height="500"/>
  step2 从模糊到清晰

<img src="vague.jpg" data-src="clear.jpg" class="lazyload" width="500" height="500"/>
  预先定义一张品质较差的图片，之后再通过懒加载展示品质高且清晰的图片。

  step3 响应式图片
<img data-sizes="auto" class="lazyload" data-src="img500w.jpg" data-srcset="img240w.jpg 240w, img320w.jpg 320w,img500w.jpg 500w, img800w.jpg 800w, img1024w.jpg 1024w," /
  在开发过程中，项目需要用到响应式布局，在移动端的情况下，我们不需要用到太过清晰的图片
简单案例：

1. <figure class="img br">
   
2.                 <a href="/"><img class="lazyload" src="/images/oad.gif" data-src="/d/file//w5.jpg" alt="标题"></a>
   
3.         </figure>

复制代码