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

移动端兼容性：

文章同步于个人小站