Skip to content

Latest commit

 

History

History
122 lines (93 loc) · 4.16 KB

README.md

File metadata and controls

122 lines (93 loc) · 4.16 KB
Raw

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.