Simple Lazy Image Loader Plugin With jQuery - lazyLoad.js

A really simple jQuery plugin that allows you to easily lazy load your large images with just one single line of JavaScript.

How it works:

It's pretty straightforward... The only difference is that you need two images instead of one, basically you'll load the tiny low resolution image on page load which will take about 10 milliseconds, then once the page is loaded the framework will take care of the rest.

How to use it:

1. Load the stylesheet jquery.lazyload.min.css and JavaScript jquery.lazyload.min.js into your webpage which has jQuery library loaded.

<link rel="stylesheet" href="jquery.lazyload.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>

2. Insert the low resolution image into the webpage and specify the path to the high resolution version using data-src attribute as this:

<img class="js-lazy-load lazy-load" src="low-res.png" data-src="high-res.png">

3. Initialize the plugin and we're done.

$('.js-lazy-load').lazyLoad();

4. Default plugin options.

$('.js-lazy-load').lazyLoad({

  // The data-attr to hold the high-res image
  attribute: 'data-src',

  // Class to append when the img is loaded
  doneClass: 'lazy-success',

  // Sets a timeout before loading the image
  timeout: 0,

  // Debug mode
  debug: false
  
});

---

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