lozad.js:懒加载神器

beautifullion 发布于2月前 阅读49次
0 条评论

Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript并且无依赖的懒加载器,其能够被用于进行图片、iframe 等多种形式的元素。通过gzip压缩过后,仅仅535字节大小,相对于常用的jquery.lazyload.js来说,lozad.js实力碾压,虽然jquery.lazyload.js也才几kb大小。在github上,至今短短的一个月的时间,已经收获了2300+的star。

传送门:阮一峰老师IntersectionObserver使用教程

懒加载

懒加载其实就是延迟加载。通俗的讲就是,当你访问一个页面的时候,先不设置img元素或者其他元素的background-image的图片的src(还有其他的懒加载形式),只有当它们进入视口的才开始加载,这样可能节省带宽从而提高网页性能,页面加载速度更加快、减轻服务器的压力。

一般懒加载实现的方法为不设置资源文件的src,而把真是的url放置在data-url(也可根据自己喜好设置)属性里面,这样在载入页面的时候不会对资源文件发起请求。当网页滚动条滚动到需要加载这个标签的时候,设置真实的url从而开始加载资源文件。

lozad

安装

$ npm install --save lozad
//or
$ yarn add lozad
//or
$ bower install lozad

然后根据ES6标准或者CommonJS的规范将lozad模块引入,当然也可以用CDN引入

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.js"></script>

使用

在html中,给需要懒加载的元素加上lozad的类名,并将src改为data-src,如下所示:

<img class='lozad' data-src='image.png' />

接下来,你所要做的就仅仅只是将lozad实例化

const observer = lozad();
observer.observe();

或者使用个性化设置:

const observer = lozad('.lozad',{
  rootMargin: '10px 0px',
  threshold: 0.1
});
observer.observe();

rootMargin和threshold均为IntersectionObserver的参数,具体使用参考阮一峰老师的教程吧。

要是你想要在加载该元素的同时执行某些函数时:

lozad('.lozad',{
  load: function(el){
      console.log('loading element');
  }
});

相似的,当你使用背景图片的时候,你可以这么操作:

<div class='lozad' data-background-image='image.png'>
</div>

以上就是lozad的基本用法了,显而易见,lozad相当的便捷。

兼容性

但是lozad也并不是没有缺点。因为它使用了IntersectionObserver的API,导致兼容性不好,chrome也刚从51版本开始使用,更不用说那些上古年代的浏览器了。

PC端兼容性:

移动端兼容性:

文章同步于个人小站

查看原文: lozad.js:懒加载神器

  • organiccat
  • beautifulbutterfly
  • bluemeercat
  • bigfrog
  • crazybird
  • whitebird
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。