@autots/lazyload NPM

lazyload observer

A LazyLoad Lib implemented through IntersectionObserver API

Features

typescript features & compiled to vanilla js
original configuration of Intersection API
some custom lifecycle callback
support ie9+

Installing

Using npm:

$ npm install @autots/lazyload -S

Using yarn:

$ yarn add @autots/lazyload

Note: cdn is not supported at now, maybe you can deliver the file dist/lazyload.min.js to your own cdn server.

Example

1. ES Module

import LazyLoad from '@autots/lazyload';

// 1. The simplest way
new LazyLoad('img[data-lazyload]');

// 2. use a config object
new LazyLoad('img[data-lazyload]',  {
  attr: 'data-src2',          // default is `data-src`
  srcsetAttr: 'data-srcset2', // default is `data-srcset`
  root: null,                 // default
  rootMargin: '0px',          // default
  threshold: 0,               // default
  onLoad: function() {        // the callback when a img loaded
    // console.log(this, 'ooooh');
  },
  onError: function() {       // the callback when loaded error
    // console.log(this, 'errrr');
  },
  onAppear: function() {      // the callback when element trigger in appearance
    // console.log(this, 'appear');
  }
})

Browser Plugin

<script src="dist/lazyload.min.js"></script>

<script>
  new AutoTs.LazyLoad(el, config);
</script>

Online Demo

There is a global variable AutoTs, and LazyLoad property is the constructor.

API

new LazyLoad(el, config);

defaultConfig = {
  delay: -1,
  wait: 100,
  attr: 'data-src',
  srcsetAttr: 'data-srcset',
  removeAttr: true,
  defaultSrcVal: 'data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///////wAAACH5BAEHAAIALAAAAAABAAEAAAICVAEAOw==',
  placeholder: '',
  placeWidth: '100%',
  placeHeight: '100%',
  maxFailureNumber: 1,
}

Name	Type	Default	Optional	Description
el	string \| NodeListOf\<Element>	--	No	the element(s) need lazy
config	typeof defaultConfig	defaultConfig	Yes	Advanced configuration

config

Name	Type	Default	Description
root	Element \| null	null	same to `IntersectionObserver.root`
rootMargin	string	'0px'	same to `IntersectionObserver.rootMargin`
threshold	number \| number[]	0	same to `IntersectionObserver.threshold`
attr	string	data-src	the attr name which saves ImageElement `src` value
srcset	string	data-srcset	the attr name which saves ImageElement `srcset` value
delay	number	-1	use `setTimeout(fn, delay)` to load all el
wait	number	100	use `setTimeout(fn, wait)` to decide if the el is visible
removeAttr	boolean	true	remove attr name (configed with attr & srcsetAttr)
defaultSrcVal	String \| null	base64	the default value of img `src` attribute
placeholder	String	''	the text/html content of placeholder for non-image el
placeWidth	String	'100%'	the width of placeholder
placeHeight	string	'100%'	the height content of placeholder
onLoad	Function	--	callback when `el` loaded
onError	Function	--	callback when loaded error
onAppear	Function	--	callback when `el` trigger in appearance
maxFailureNumbe	number	1	after trigger onError `maxFailureNumber` times, will exec `unobserve` fn

Note: The el type should be String or NodeListOf<Element>, that is to say we recommend you to use CSS selector to set , or use querySelectorAll.