Defer Image Loading Until In Viewport - jQuery Late images

Late images is a lightweight, performant jQuery lazy load plugin that your images outside of viewport are not loaded until they become visible on page scroll. Also can be implemented in pure JavaScript.

How to use it:

1. Install the Late images library and import it into your project.

# NPM
$ npm install late-images --save

# Bower
$ bower install late-images

2. Set the image source in the data-src attribute as follows:

<img class="lateImage" data-src="1.jpg" alt="image 1">
<img class="lateImage" data-src="2.jpg" alt="image 2">
<img class="lateImage" data-src="3.jpg" alt="image 3">
...

3. Initialize the library with jQuery.

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

$('.lateImage').lateImages(option);

4. Initialize the library with pure JavaScript.

new LateImage(element,option);

5. Below are the available settings and the default values that can be passed to the LateImage() function.

{

  // default image src attribute
  srcAttribute: 'data-src',

  // default image alt attribute
  altAttribute: 'data-alt',

  // callbacks
  loadingCallback: null,
  doneCallback: null,
  failCallback: null,

  // threshold
  threshold: 0,

  // CSS classes
  // great for animations and error handling
  loadingClass: 'lateImageLoading',
  loadedClass: 'lateImageLoaded',
  errorClass: 'lateImageError',

  // enable viewport check
  enableViewportCheck: true
  
};

---

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