lazysizes使用

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

  step2 从模糊到清晰

"vague.jpg" data-src="clear.jpg" class="lazyload" width="500" height="500"/>

  预先定义一张品质较差的图片,之后再通过懒加载展示品质高且清晰的图片。

lazysizes使用_第1张图片lazysizes使用_第2张图片

  step3 响应式图片

"auto" class="lazyload" data-src="img500w.jpg" data-srcset="img240w.jpg 240w, img320w.jpg 320w,img500w.jpg 500w, img800w.jpg 800w, img1024w.jpg 1024w," /

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

你可能感兴趣的:(前段)