Lazi

Lazy loading images.

Demo

Features

• passive
• IntersectionObserver

Install

$ npm install --save lazi

// using ES6 modules
import lazi from 'lazi'

// using CommonJS modules
var lazi = require('lazi')

The UMD build is available on unpkg:

<script src="https://unpkg.com/lazi/dist/lazi.umd.js"></script>

Usage

import lazi from 'lazi'
lazi()

<img data-lazi-src="a.png" />
<div data-lazi-src="a.png" data-lazi-bg></div>

API

var instance = lazi({threshold: 1, strategy: 2})
instance.add().load()
instance.add('data-src', 3).load()

strategies

• IntersectionObserver: 0
• throttle: 1
• requestAnimationFrame: 2

events

• loading
• done
• error
• pre

options({src, threshold, strategy, timeout})

Reset default configs:

• src reset default src prop (default: data-lazi-src)
• threshold reset default threshold (default: 1)
• strategy reset default strategy (default order: 0 -> 1)
• timeout reset throttle timeout (default: 150)

add(srcprop, threshold)

Add new dom elements into lazy queue:

• srcprop Lazy src property (eg. <img data-src="xx.png" />)
• threshold How far to preload for current elements.

load()

Normally, after adding new elements, a new reload need be triggered. While if we are in intersection mode, no need to reload.

on(event, selector, handler)

var fn = () => {}
instance.on('done', fn)
instance.on('done', 'data-a1', fn)

off(event, selector, handler)

instance.off('done')
instance.off('done', fn)
instance.off('done', 'data-a1')
instance.off('done', 'data-a1', fn)

emit(event, ...args)

instance.emit('done')
instance.emit('done.data-a1')

pipe(event, handler)

instance.pipe('pre.data-a1', fn)
instance.pipe('pre.data-a1')

Todos

• check element type
• support background-image
• config loadElm
• ...