Press "Enter" to skip to content

Simple JavaScript Library for Lazy Loading Images On A Web Page | image-defer.js

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


See Demo And Download

Official Website(quru): Click Here

This superior jQuery/javascript plugin is developed by quru. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.