Easy Image Loader & Preloader Plugin With jQuery - lazyRender

lazyRender is a simple jQuery image lazy loader & preloader plugin for lazy loading images when needed as well as pre-loading specific images to improve the page loading speed. Supports both img tag and background image.

How to use it:

1. To get started, you need to load jQuery library and the jQuery lazyRender plugin's files in the document.

<link href="jquery.lazyRender.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="jquery.lazyRender.js"></script>

2. Initialize the plugin and we're ready to go.

$(document).lazyRender();

3. Lazy load an image using the data-lazy-src attribute instead of the original src.

<img data-lazy-src="1.jpg" width="400" height="300">

4. If you'd like to lazy load a background image for your container.

<div class="demo" data-lazy-class="has-background"></div>

.demo.has-background {
  background-image: url(1.jpg);
}

5. Preload your image for further use:

<i data-preload-image="1.jpg"></i>

6. You can also render the images manually:

$('#manually').on('click', function () {
  $(document).lazyRender('render');
});

---

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