lazysizes-好用的延迟加载JS插件

Posted 2020-09-23 薛伟杰

此插件可直接引入lazysizes即可

<script src="lazysizes.min.js"></script>

  延迟加载(lazy load)是(也称为懒加载)Hibernate3关联关系对象默认的加载方式，延迟加载机制是为了避免一些无谓的性能开销而提出来的，所谓延迟加载就是当在真正需要数据的时候，才真正执行数据加载操作。
  浏览器加载过程中，由于图片过多导致加载速度过慢，那么我们只需要在“看得见”的地方加载图片，而“看不见”的地方会跟随滚动条的滚动而加载。
  此教程只针对于固定宽高的图片，详细请看 http://afarkas.github.io/lazysizes/#examples
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," /

  在开发过程中，项目需要用到响应式布局，在移动端的情况下，我们不需要用到太过清晰的图片，以免造成用户流量的损失。