jQuery Plugin For Simple Image Preloader - lazyimage

lazyimage is a lightweight jQuery plugin that displays a loading spinner/placeholder for your image and then fades the image in once loaded, similar to the lazy load effect. Animation based on CSS3 transtions and transforms.

How to use it:

1. Load jQuery library and the jQuery lazyimage plugin's stylesheet and Javascript in the document.

<link rel="stylesheet" href="css/eskju.jquery.lazyimage.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/eskju.jquery.lazyimage.js"></script>

2. Wrap your image into a DIV container.

<div class="demo">
  <img src="http://lorempixel.com/400/300" width="400" height="300">
</div>

3. Call the LazyImage() function on the image's container to enable the plugin.

$(".demo").LazyImage();

4. Available options.

$(".demo").LazyImage({

// CSS Classes
classLoading: "esKju-lazyimage",
classLoaded: "esKju-lazyimage-loaded",
classBroken: "esKju-lazyimage-broken",

applyDimensions: true,
createParentContainers: true,
parentContainerHtml: "<div></div>",

// fade, translate, zoom and skew
animation: "fade",

filter: "bloom"

});

---

This awesome jQuery plugin is developed by eskju. For more Advanced Usages, please check the demo page or visit the official website.