Minimalist Image Lazy Loader In Pure JavaScript

Category: Image , Loading | February 26, 2018
Author: ShlokD
Views Total: 1,225
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