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.

Related Posts


Convert An HTML File Input Type Into a Fancy File Uploader

jQuery Fancy File Uploader is a jQuery extension for converting an HTML file input type into a portable fancy file uploader. Choose from an MIT or LGPL…


Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…


Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…


How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…


A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…

Simple jQuery Plugin for Embedding YouTube Videos As Cover Background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…