Minimalist Image Lazy Loader In Pure JavaScript

Category: Image , Loading | February 26, 2018
Author:ShlokD
Views Total:548 views
Official Page:Go to website
Last Update:February 26, 2018
License:MIT

Preview:

Minimalist Image Lazy Loader In Pure JavaScript

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 }

You Might Be Interested In:


Leave a Reply