Responsive Image Lazy Load With JavaScript

Must Read : Responsive Image Lazy Load With JavaScript

responsivelyLazy is an ultra-light javascript library which allows you to delay the loading of appropriate images based on the width of their parent containers. Help you speed up the initial page load time to provide better user experience.

How to use it:

Load the responsivelyLazy’s JavaScript and CSS in the document.

Use data-srcset to specify a group of images for different screen resolutions.

[button style=”btn-link btn-lg” icon=”glyphicon glyphicon-download-alt” align=”left” iconcolor=”#1e73be” type=”link” target=”_blank” title=”Download” link=”https://github.com/ivopetkov/responsively-lazy/archive/master.zip” linkrel=””]

Minimal Fullscreen Image Preloader – Preloader.js

Must Read : Minimal Fullscreen Image Preloader – Preloader.js

Preloader.js is a super lightweight JavaScript library that displays a fullscreen overlay with custom loading text until all the specified images have been loaded.

How to use it:

Create the html for the image preloader.

Load the preloader.js script in the document.

Create an array of images you want to preload and then initialize the image preloader.

[button style=”btn-link btn-lg” icon=”glyphicon glyphicon-download-alt” align=”left” iconcolor=”#1e73be” type=”link” target=”_blank” title=”Download” link=”https://github.com/yhb241/Preloader.js/archive/master.zip” linkrel=””]