Mobile Compatible jQuery Image Lazy Loader - Lazyloader

File Size: 11.3 KB
Views Total: 1351
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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:


  • 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.