Mobile Compatible jQuery Image Lazy Loader - Lazyloader

Just another jQuery / Zepto based image lazy loader for your responsive website that lets you load images progressively as they enter the screen or viewport to save bandwidth and server requests.

Basic usage:

1. Include the jQuery Lazyloader's script after jQuery JavaScript library, but before the closing body tag.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/lazyloader.js"></script>

2. Use data-src attribute to specify the actual paths to your images. The original src attribute is used to specify the paths to image placeholders.

<img class="lazyLoad" data-src="image.jpg" src="placeholder.jpg">

3. Enable the plugin.

new Lazyloader({
    el: $('img.lazyLoad')
});

4. More configuration options.

// html attribute to hold your images
src: 'data-src',

// target element
el: $('img.lazy'),

// Y-offset to trigger the lazy loading
offset: 0

Change log:

2015-09-16

• fix some text bug and optimize demos

---

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