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.

Features:

• 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="//code.jquery.com/jquery-1.11.3.min.js"></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.

$.imgLazy();

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

$.imgLazy({
  effect: 'fadeIn'
});

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

$.imgLazy({

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

});

6. All configuration options with default values.

$.imgLazy({

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

});

Change log:

2016-09-05

• bugfix

---

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