Minimalist Image Lazy Loader In Pure JavaScript

Preview:

Description:

A super tiny (less than 1kb) image lazy loader library without any third dependencies.

How to use it:

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

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

Define the images to lazy load 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">

Apply a fade in 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 }