Animated Image Lazy Loader With Broken Image Fallback – rogano-lazy

Preview:

Description:

rogano-lazy is a modern image lazy loader written in pure JavaScript without any 3rd dependencies.

The image lazy loader allows you to define a custom CSS class for broken image URL so that you can customize the fallback image when you provide an invalid image.

It also comes with 5 fancy animations that can be used to animate images when it is scrolled into view.

How to use it:

Insert the rogano-lazy’s JavaScript and CSS files into the html file.

<link rel="stylesheet" href="roganolazy.css">
<script src="lazy-roga.min.js"></script>

Insert a placeholder image into the page and specify the path to the original image in the data-src attribute:

<img data-src="img/1.png" src="img/placeholder.png">

Add the rogano-lazy and lazy-broken classes to your image.

<img data-src="img/1.png" src="img/placeholder.png" class="rogano-lazy lazy-broken">

Add an animation class to the image.

• .lazy-fade
• .lazy-half
• .lazy-translate
• .lazy-folder
• .lazy-scale

<img data-src="img/1.png" src="img/placeholder.png" class="rogano-lazy lazy-broken lazy-folder">

Specify the fallback class in the data-src attribute:

• unlink
• broken

<img data-src="img/1.png" src="img/placeholder.png" class="rogano-lazy lazy-broken lazy-folder" data-broken="unlink">

Initialize the rogano-lazy and done.

document.addEventListener('DOMContentLoaded', function(){
  let _lazy = new Lazy();
});