Progressive Image Loading in JavaScript

Progressive Image Loading in JavaScript
Code Snippet:Pilpil - Progressive Image Loading
Author: MM Aurangajeb
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 517
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X