lazy-load-images is a very small (less than 1KB) image loader library with no third dependencies.

lazy loading images, loadinglazy, lazy loading example, lazy loading with blurred image effect, lazy loading javascript

How to make use of it:

1. Import the compiled version of the lazy loader library into your HTML page.

<script src="dist/index.js"></script>

2. Specify images for lazy loading in the data-src attribute:

<img class="visible-image" data-src="1.jpg">
<img class="visible-image" data-src="2.jpg">
<img class="visible-image" data-src="3.jpg">

3. Apply a fade effect to the image when loaded.

img {
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: opacity .5s;
  transition: opacity .5s
}
.visible-image { opacity: 1 }
.hidden-image { opacity: 0 }

minimalist image lazy loader, lazy-load-images Plugin/Github

See Demo And Download

Official Website(ShlokD): Click Here

This superior jQuery/javascript plugin is developed by ShlokD. For extra advanced usage, please go to the official website.