Flexible Image Lazy Loader – kit.lazy.js

Category: Image , Javascript , Loading | September 28, 2018
Author: Natteke
Views Total: 200 views
Official Page: Go to website
Last Update: September 28, 2018
License: MIT


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:


$ 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'

Initialize the kit.lazy library and done.


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

<div class="image bgExample kit-lazy">
.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);


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);

You Might Be Interested In:

Leave a Reply