Deferring Image Loading Until Page Is Loaded - jQuery DeferImageLoading

The jQuery Defer Image Loading plugin provides another smart way to lazy load images in your long webpages. It defer the image loading until all the content of you webpage is completely loaded.

How to use it:

1. Download and put the JavaScript file jquery.deferimageloading.js after jQuery, but before you close the body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.deferimageloading.js"></script>

2. If you want to defer the loading of your large image just put the image path in the data-src attribute instead as follow:

<img class="demo" src="small.jpg" data-src="large.jpg">

3. Initialize the plugin and done. In this case, the small image will replaced with the large version when it is fully loaded.

$('.demo').deferImageLoading();

4. The plugin provides a callback function which will be triggered once all of the deferred images have been requested.

$('.demo').deferImageLoading(function() {
  // do something
});

---

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