Performant Image Lazy Loading Plugin with jQuery - imglazy

File Size: 13 KB
Views Total: 2421
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Performant Image Lazy Loading Plugin with jQuery - imglazy

imglazy is a super tiny and performance-focused jQuery plugin which handles lazy loading of images within your document with a fade-in effect as they come into view.


  • Lightweight and simple to use.
  • Cross browser and cross platform.
  • A fade-in effect when an image has been completely loaded.
  • Custom threshold and offset to trigger the lazy loading.
  • Custom image placeholder.

How to use it:

1. Make sure both the jQuery imglazy plugin and jQuery library are included on your webpage.

<script src="//"></script>
<script src="jquery.imglazy.js"></script>

2. Add the images into your webpage.

  • src: the path to placeholders.
  • data-src: the path to original images.
<img src="placeholder.png" data-src="1.jpg">
<img src="placeholder.png" data-src="2.jpg">
<img src="placeholder.png" data-src="3.jpg">
<img src="placeholder.png" data-src="4.jpg">
<img src="placeholder.png" data-src="5.jpg">

3. Initialize the plugin and done.


4. Apply a fadeIn effect to images when they're scrolled into view.

  effect: 'fadeIn'

5. Enable / disable viewport-triggeredd image lazy loading.


  // true: load images inside the viewport
  // false: load images before and inside the viewport
  viewport: false


6. All configuration options with default values.


  selector: "img[data-src]",
  src: "data-src",
  effect: "none",
  threshold: 0,
  timeout: 0,
  viewport: false


Change log:


  • bugfix

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