Progressive Image Loading in JavaScript

This JavaScript code implements progressive image loading with a blur effect to enhance page load times. It calculates aspect ratios, sets max dimensions, and loads images progressively. It’s helpful for optimizing image-heavy websites.

You can use this code on image-rich websites to improve loading times. It reduces initial page load delay by loading low-quality images first and then replacing them with high-quality ones, enhancing user experience. This helps retain visitor engagement and improves overall site performance.

How to Use Progressive Image Loading JavaScript Code

1. Inside your HTML container (<div class="container"> in the example), insert the images you want to load progressively using the following structure:

<div class="container">
<figure class="graf-figure">
 <div class="aspectRatioPlaceholder">
 <div class="aspectRatioPlaceholder-fill"></div>
 <div class="progressiveMedia" data-width="YOUR_IMAGE_WIDTH" data-height="YOUR_IMAGE_HEIGHT">
 <img class="progressiveMedia-thumbnail" src="LOW_QUALITY_IMAGE_URL" />
 <canvas class="progressiveMedia-canvas"></canvas> 
<img class="progressiveMedia-image" data-src="HIGH_QUALITY_IMAGE_URL" /> </div>
 </div> 
</figure>
</div>

Replace YOUR_IMAGE_WIDTH, YOUR_IMAGE_HEIGHT, LOW_QUALITY_IMAGE_URL, and HIGH_QUALITY_IMAGE_URL with the appropriate values and image URLs.

2. Similarly, add the following CSS code to your project to add a blur effect while loading images progressively. You can modify the CSS code (in styles.css) to match your website’s design and layout preferences.

/**
 * Pilpil v1.0.0 - Progressive Image Loading
 * @link https://zafree.github.io/pilpil
 * @copyright 2015-2023 Zafree
 * @license MIT
 */
figure {
  display: block;
  margin: 0; }

.graf-figure {
  position: relative;
  clear: both;
  outline: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.aspectRatioPlaceholder {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: block; }

.aspectRatioPlaceholder-fill {
  display: block; }

.progressiveMedia {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05); }

.progressiveMedia-thumbnail {
  display: none; }

.progressiveMedia-canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: baseline; }

.progressiveMedia-image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  z-index: 100;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.progressiveMedia .progressiveMedia-canvas {
  visibility: hidden;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
.progressiveMedia.is-canvasLoaded .progressiveMedia-canvas {
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility 0s linear 0s,opacity .4s 0s;
  transition: visibility 0s linear 0s,opacity .4s 0s; }
.progressiveMedia .progressiveMedia-image {
  visibility: hidden;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
.progressiveMedia.is-imageLoaded .progressiveMedia-image {
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility 0s linear 0s, opacity 1s 0s;
  transition: visibility 0s linear 0s, opacity 1s 0s; }

.github-star,
.graf-figure {
  margin-top: 20px;
  margin-bottom: 20px;
}

3. Finally, add the following JavaScript code to your project, create a JavaScript file (e.g., script.js), and paste the code into it. This code will handle the progressive loading of images. It calculates aspect ratios, sets maximum dimensions, and loads images progressively. No further configuration is needed.

/**
 * Pilpil v1.0.0 - Progressive Image Loading
 * @link https://zafree.github.io/pilpil
 * @copyright 2015-2023 Zafree
 * @license MIT
 */
;(function() {
    'use strict';

    // set progressive image loading
    var progressiveMedias = document.querySelectorAll('.progressiveMedia');
    for (var i = 0; i < progressiveMedias.length; i++) {
        loadImage(progressiveMedias[i]);
    }

    // global function
    function loadImage(progressiveMedia) {

        // calculate aspect ratio
        // for the aspectRatioPlaceholder-fill
        // that helps to set a fixed fill for loading images
        var width = progressiveMedia.dataset.width,
        height = progressiveMedia.dataset.height,
        fill = height / width * 100,
        placeholderFill = progressiveMedia.previousElementSibling;

        placeholderFill.setAttribute('style', 'padding-bottom:'+fill+'%;');


        // set max-height and max-width to aspectRatioPlaceholder
        // that is fun
        var aspectRatioPlaceholder = progressiveMedia.parentElement,
        maxWidth = aspectRatioPlaceholder.offsetWidth,
        maxHeight = aspectRatioPlaceholder.offsetHeight;

        aspectRatioPlaceholder.setAttribute('style', 'max-width:'+maxWidth+'px; max-height:'+maxHeight+'px;');


        // get thumbnail height wight
        // make canvas fun part
        var thumbnail = progressiveMedia.querySelector('.progressiveMedia-thumbnail'),
        smImageWidth = thumbnail.width,
        smImageheight = thumbnail.height,

        canvas = progressiveMedia.querySelector('.progressiveMedia-canvas'),
        context = canvas.getContext('2d');

        canvas.height = smImageheight;
        canvas.width = smImageWidth;

        var img = new Image();
        img.src = thumbnail.src;

        img.onload = function () {
            // context.drawImage(img, 0, 0);
            // draw canvas
            var canvasImage = new CanvasImage(canvas, img);
            canvasImage.blur(2);

            // load canvas visible
            progressiveMedia.classList.add('is-canvasLoaded');
        };


        // grab data-src from original image
        // from progressiveMedia-image
        var lgImage = progressiveMedia.querySelector('.progressiveMedia-image');
        lgImage.src = lgImage.dataset.src;

        // onload image visible
        lgImage.onload = function() {
            progressiveMedia.classList.add('is-imageLoaded');
        }
    }

})();

// canvas blur function
CanvasImage = function (e, t) {
    this.image = t;
    this.element = e;
    e.width = t.width;
    e.height = t.height;
    this.context = e.getContext('2d');
    this.context.drawImage(t, 0, 0);
};

CanvasImage.prototype = {
    blur:function(e) {
        this.context.globalAlpha = 0.5;
        for(var t = -e; t <= e; t += 2) {
            for(var n = -e; n <= e; n += 2) {
                this.context.drawImage(this.element, n, t);
                var blob = n >= 0 && t >= 0 && this.context.drawImage(this.element, -(n -1), -(t-1));
            }
        }
    }
};

That’s all! hopefully, you have successfully integrated this JavaScript code for progressive image loading. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.