Laggyload is simply asynchronus lazyloader it features throw away viewport (scroll) trigger.

Setup

yarn add laggyload

import Laggyload from 'laggyload'

Usage

First of all, look and read here(original).

Most simple case

const Laggy = new Laggyload()
Laggy.load()

Optional case

const Laggy = new Laggyload('.async', 1000)

// Do something at after load
const AfterLoadedFunction = (_) => {
    _.classList.add('is-loaded')
    console.log('that\'s all')
}

Laggy.load(AfterLoadedFunction)

• 1st augment: Target querySelector (default: .async)
• 2nd augment: Delay time until display image (millisecond, default: 100)

<img class="async" src="loading.gif" data-src="authentic_image.png">

• Add your laggyload querySelector to target elements (default: async class)
• Placehold image for src attribute
• Authentic image for data-src attribute

Setup

yarn add laggyload

Next

• [ ] add attributes option
• [ ] placehold backgroundColor
• [ ] seo

Fork me :D

License

MIT © Pokkur