@autots/lazyload

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.