Simple JavaScript Library for Lazy Loading Images On A Web Page

image-defer is a simple, fast, and dependency-free JavaScript library for the lazy loading of images on a web page. In short, images you choose to defer so the user can see them don’t load, while images that remain “off-page” never load.

lazy loading javascript on scroll, lazy load images example, loadinglazy, lazy load images jquery, image lazy loading, lazy load images html, image loading placeholder

Lazy upload images have the following aspects:

Reduced server load, server bandwidth, and client-side bandwidth, by never uploading images the user never sees
Flatter server loads, by not requesting all images at once
Web page loading speed
Reduce client-side memory usage – at least initially
Maximum client-side memory usage – with ImageDefer.options.maxLoaded

These are the downsides:

Requires little extra CPU power when user scrolling web page
You need to know the dimensions of the image beforehand (use fixed sizes so the page does not scroll while the images are loaded)
The user may have to wait for a short time for the images to load when viewing them
The user needs to enable JavaScript to view images
This library was developed for and bundled with Koru Image Server, but it works well on its own for use with still or dynamic images.

A Super Small And Ultra-Efficient Library For Lazy Loading | defer.js

How to make use of it:

1. Include the main JavaScript “image-defer.js” on the webpage when needed.

<script src="/path/to/image-defer.js" defer></script>

2. Add the placeholder to the webpage and specify the original image in the ‘data-defer-src‘ attribute as follows:

<img class="defer" src="placeholder.png" data-defer-src="original.jpg">

3. Pre-define ImageDefer when using “async” or “delayed” with <script>:

window.ImageDefer = window.ImageDefer || {};

4. Set photo delay options:

ImageDefer.options = {
  onImageRequested: imageLoading,
  onImageLoaded: imageLoaded,
  onImageUnloaded: imageUnloaded
};

5. Response to image delay events:

function imageLoading(img) {
  removeClass(img, 'loaded');
  addClass(img, 'loading');
}
function imageLoaded(img) {
  removeClass(img, 'loading');
  addClass(img, 'loaded');
}
function imageUnloaded(img) {
  removeClass(img, 'loading');
  removeClass(img, 'loaded');
}

6. All default options and callback functions.

ImageDefer.options = {
  // the maximum number of images to lazy load before starting to unload images again
  maxLoaded: 100,
  // the time to wait, in milliseconds, before considering that a scrolling event has completed
  scrollingStopMillis: 500,
  // the speed of scrolling, in pixels/millisecond, above which images will not be lazy loaded
  scrollingSkipRate: 0.8
  // callback functions
  onImageRequested: null,
  onImageLoaded: null,
  onImageUnloaded: null,
  
};

Smart Image Lazy Load JS Library, image-defer.js Plugin/Github, react lazy load images