高性能轻量级和可配置的懒加载器Lozad.js

高性能轻量级和可配置的懒加载器Lozad.js

  • 开源协议:MIT
  • 操作系统: Windows Linux OS X
  • 开发语言:Js
  • 项目所有者:ApoorvSaxena
  • 收录时间:2017-09-22
  • 分享:
编辑评级
3

项目详细介绍

Lozad.js 是一款基于 IntersectionObserver API 的高性能、轻量级(〜0.5kb)和可配置的懒加载器,纯 JavaScript ,无依赖,可用于延迟加载图片、iframe 、广告、视频和其他元素。

Demo

Usage

在 HTML 中,添加标识符到元素(默认选择器标识为 lozad 类):


 

然后你需要做的就是实例化 Lozad :

const   observer   =   lozad();   //   lazy   loads   elements   with   default   selector   as   '.lozad'
observer.observe();

或使用自定义选项:

const   observer   =   lozad('.lozad',   {
            rootMargin:   '10px   0px',   //   syntax   similar   to   that   of   CSS   Margin
            threshold:   0.1   //   ratio   of   element   convergence
});
observer.observe();

参考:

  • IntersectionObserver options: rootMargin

  • I

    ntersectionObserver options: thresholds

亦或者你想给定制功能定义加载元素:

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

                        //   Custom   implementation   to   load   an   element
                        //   e.g.   el.src   =   el.dataset.src;
            }
});

如果想懒加载动态添加的元素:

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

//   ...   code   to   dynamically   add   elements
observer.observe();   //   observes   newly   added   elements   as   well