https://github.com/nestednet/lazier

Lazier.js - lazy loading images
https://github.com/nestednet/lazier

images javascript javascript-library lazy-loading lazyload lazyload-images

Last synced: 4 months ago
JSON representation

Lazier.js - lazy loading images

• Host: GitHub
• URL: https://github.com/nestednet/lazier
• Owner: Nestednet
• License: mit
• Created: 2018-02-05T15:37:01.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2019-05-09T11:10:48.000Z (over 6 years ago)
• Last Synced: 2025-09-01T19:46:57.495Z (5 months ago)
• Topics: images, javascript, javascript-library, lazy-loading, lazyload, lazyload-images
• Language: JavaScript
• Size: 9.53 MB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![Known Vulnerabilities](https://snyk.io/test/npm/lazier-js/badge.svg)](https://snyk.io/test/npm/lazier-js)

## Lazier.js

A little handy library for lazy loading the images of your Page:

![](Example/record_example.gif)

It's inspired by the ideas that @JMPerez posted [here](https://medium.com/@jmperezperez/how-medium-does-progressive-image-loading-fd1e4dc1ee3d).

In order to work in all major browsers it avoids the CSS filters and uses the HTML5 canvas approach that Medium uses.

It uses a modified and lighter version of Mario Klingemann [SuperFastBlur](http://www.quasimondo.com/BoxBlurForCanvas) algorithm, modified in order to work with canvas objects and not unique id's.

### What does Lazier.js?

In order to speed up the performance of your web page you can lazy load the images of it. That means to load the images when the DOM of your page is already loaded. Lazier.js does this for you!

Oh, and doing it the same way as Medium does it handles it pretty :sparkles: beautifully :sparkles: :wink:

![](Example/stages.png)

### How to use it

Get both `lazier.min.js` and `lazier.min.css`.

You can download it from github or use npm to get the updated version.

```BASH

npm install lazier-js

```

You need to **link the minified css file** at the header of your page:

```HTML

      

```

**Modify the structure of your HTML file**:

Lazier.js uses the same HTML structure as [Medium](https://www.medium.com) you need to replace the images that you want to lazy load by the following block:

```HTML



      

      

      

      <img class="lazierNoScript" src="big.jpg">



```

**LowFi Image:**

```HTML



```

Define as `data-src` the low fidelity image that you want to use. We have tested it with very small images, with a heavy compression: (25px widht, 20% quality).


**HighFi Image:**

```HTML



```

Define as `data-src` the the high fidelity image that you want to load.

**FallBack Image:**

```HTML

<img class="lazierNoScript" src="high.jpg">

```

Define here the fallback image that is going to be loaded if the browser doesn't have JavaScript support. *(WIP)*

**Load the minified JavaScript:**

```HTML

```

Load the script at your Page and it's done! :star:

**Example**

```HTML

  



    


        

        

        

        <img class="lazierNoScript" src="Test/test_medium_size.jpg">

    





    


        

        

        

        <img class="lazierNoScript" src="Test/test_medium_size.jpg">

    





    


        

        

        

        <img class="lazierNoScript" src="Test/test_medium_size.jpg">

    





    


        

        

        

        <img class="lazierNoScript" src="Test/test_medium_size.jpg">

    



```