Tiny Performant Image Lazy Load Plugin with jQuery - imgLazyLoad

File Size: 4.92 KB
Views Total: 3427
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Tiny Performant Image Lazy Load Plugin with jQuery - imgLazyLoad

A simple, lightweight and high performance jQuery image lazy load plugin that delays loading of images until they enter viewport.

How to use it:

1. Make sure to load the imglazyload.js plugin after you've loaded jQuery library.

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

2. Insert your images into the webpage using data-src attribute. The original src

<img data-src="1.jpg" src="loading.svg">
<img data-src="2.jpg" src="loading.svg">
<img data-src="3.jpg" src="loading.svg">
...

3. Call the function on the img tag and we're done.

$('img').imgLazyLoad();

4. Plugin's default options.

$('img').imgLazyLoad({

  // jquery selector or JS object
  container: win,

  // jQuery animations: show, slideDown, etc
  effect: 'fadeIn',

  // aniamtion speed
  speed: 600,

  // animation delay
  delay: 400,

  // callback function
  callback: function(){}

});

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