lozad.js：懒加载神器

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端兼容性：

移动端兼容性：

文章同步于我的小站