LIOS - load image on scroll

This Js library also work for background image loading after scroll

Working with <img/> tag

Step1: Add Js CDN or npm install

Step2: Add a className 'lios' in <img/> tag, in src attribute set spinner.gif or any lightweight image(jpg, png ,gif etc.) and set your desired image in data-src attribute.

After Scroll, your desired image will set on src attribute and 'lios' will be removed from classList.

Example

image
image
image
image
image
image

Working with background-image

Step1: Add Js CDN or npm install

Step2: Add a className 'lios' in your element, set style="background-image: spinner.gif" or any lightweight image(jpg, png ,gif etc.) and set your desired image in data-src attribute.

Note: you can also set background-color instead of background-image

After Scroll, your desired image will set on src attribute and 'lios' will be removed from classList.

Example with initial lightweight background-image

Example with initial background-color

Give a Star on Github
close