Plugin Overview

jQuery.lazyload.js is a lightweight JavaScript library that enables deferred image loading for web pages. Images outside the browser's viewport remain unloaded until they become visible through scrolling, which contrasts with traditional preloading approaches. This technique significantly improves page load performance, especially for content-heavy sites with numerous large images. Browser resources are optimized as only visible images are initially loaded, allowing faster rendering and reduced server load.

Download Links

Library Source: http://www.ijquery.cn/js/lazyload/jquery.lazyload.js

Live Demo: http://www.ijquery.cn/demo/lazyload

Complete Package: http://www.ijquery.cn/demo/lazyload/lazyload.zip

Browser Compatibility

Requires jQuery version 1.3.0 or higher, or Zepto 1.0.0 and above.

IE6+	Chrome	Firefox	Opera	Safari

Configuration Options

{
  placeholder: "img/grey.gif",     // Default placeholder image
  effect: "fadeIn",               // Animation effect for image appearance
  threshold: 200,                  // Pixels from viewport to trigger loading
  event: "click",                 // Trigger event for loading initiation
  failurelimit: 10                 // Maximum attempts for failed loads
}

Basic Implementation

The plugin stops loading once it encounters the first image outside the visible area. However, layout irregularities may cause visible images to remain unloaded. The failurelimit parameter addresses this by attempting to load additional off-screen images.

Include Required Scripts

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>

Markup Structure

Apply the lazy class to images and specify source URLs using the data-original attribute:

<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
<img class="lazy" data-original="img/viper_1.jpg">
<img class="lazy" data-original="img/viper_corner.jpg">
<img class="lazy" data-original="img/bmw_m3_gt.jpg">
<img class="lazy" data-original="img/corvette_pitstop.jpg">

Plugin Initialization

$(document).ready(function() {
    $("img.lazy").lazyload({
        effect: "fadeIn"
    });
});