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

Category: Image , Javascript , Loading , Recommended | November 5, 2018
Author: roganoalien
Views Total: 368
Official Page: Go to website
Last Update: November 5, 2018
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply