Flexible Image Lazy Loader – kit.lazy.js

kit.lazy is a small, simple image lazy loading library that supports image tag, background image, and asynchronous images loading.

How to use it:

Installation:

# NPM
$ npm install kit.lazy --save

Import the kit.lazy.js.

<script src="kit.lazy.js"></script>

Add the class ‘kit-lazy’ to your image and specify the placeholder image in the ‘src’ attribute. The ‘data-src’ attribute is used to define the path to the original image that will load when scrolled into view.

<img class='kit-lazy'
     src='placeholder.jpg'
     data-src='/example.jpg'>

Initialize the kit.lazy library and done.

kit.createLazy();

To delay the loading of a background image, follow these steps:

<div class="image bgExample kit-lazy">
  ...
</div>

.image {
  width: 100%;
  height: 300px;
  background: no-repeat center/cover;
}
.bgExample {
  background-image: url("placeholder.jpg");
}
.bgExample.loaded {
  background-image: url("example.jpg");
}

To lazy load an image asynchronously.

let image = '<img class="image kit-lazy" src="img-placeholder.jpg" data-src="example.jpg"/>'
document.body.insertAdjacentHTML('beforeend', image);
kit.lazy.load()

Optionally, you can apply a custom loading effect to the image before/after loading. In this example, we’re going to create a Medium style blur effect on the image.

.image {
  filter: blur(20px);
  transition: background-image ease-in-out 0.5s;
}
.bgExample.loaded {
  filter: blur(0);
}