JavaScript Loading Progress of an Image

How to make a progress bar with image

.progressbar {  width: 100%;  border: 1px solid black;  border-radius: 5px;  height: 24px;}
.icon {  width: 24px;  height: 24px;  position: absolute;  right: -12px;  opacity: .5;}
.progress {  width: 50%;  background-color: green;  position: relative;  height: 24px;}

<div class="progressbar">  <div class="progress">    <img class="icon" src="https://loremicon.com/ngon/128/128/811932708408/jpg">  </div></div>

Background image loading progress track using javaScript

I thought image element have progress events. But it doesn't. According to the article

The HTML image element lacks progress events. The Web Platform team at
Adobe is proposing adding image progress events to HTML5 spec and
implementing them in browsers.

So I used his solution to answer my own question.

var request;
var progressbar = document.querySelector('#imgload');

function loadImage(imageURI)
{
    request = new XMLHttpRequest();
    request.onloadstart = showProgressBar;
    request.onprogress = updateProgressBar;
    request.onload = showImage;
    request.onloadend = hideProgressBar;
    request.open("GET", imageURI, true);
    request.overrideMimeType('text/plain; charset=x-user-defined'); 
    request.send(null);
}

function showProgressBar()
{
    progressbar.innerHTML = 0;
}

function updateProgressBar(e)
{
    if (e.lengthComputable){
        progressbar.innerHTML = e.loaded / e.total * 100;
    }
}

function showImage()
{
    var imageElement = "data:image/jpeg;base64," + base64Encode(request.responseText);
    document.body.style.backgroundImage='url("' + imageElement + '")';
}

function hideProgressBar()
{
    progressbar.innerHTML = 100;
}

// This encoding function is from Philippe Tenenhaus's example at http://www.philten.com/us-xmlhttprequest-image/
function base64Encode(inputStr) 
{
   var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
   var outputStr = "";
   var i = 0;

   while (i < inputStr.length)
   {
       //all three "& 0xff" added below are there to fix a known bug 
       //with bytes returned by xhr.responseText
       var byte1 = inputStr.charCodeAt(i++) & 0xff;
       var byte2 = inputStr.charCodeAt(i++) & 0xff;
       var byte3 = inputStr.charCodeAt(i++) & 0xff;

       var enc1 = byte1 >> 2;
       var enc2 = ((byte1 & 3) << 4) | (byte2 >> 4);

       var enc3, enc4;
       if (isNaN(byte2))
       {
           enc3 = enc4 = 64;
       }
       else
       {
           enc3 = ((byte2 & 15) << 2) | (byte3 >> 6);
           if (isNaN(byte3))
           {
               enc4 = 64;
           }
           else
           {
               enc4 = byte3 & 63;
           }
       }

       outputStr += b64.charAt(enc1) + b64.charAt(enc2) + b64.charAt(enc3) + b64.charAt(enc4);
    } 

    return outputStr;
}

window.onload = function(){
    loadImage('High-Res-Wallpaper-HD-For-Desktop.jpg');
}

loading image into canvas with a progress bar

Images do not have a progress event so normally you can not show the progress of an individual image. Yet I see you are using a FileReader..

You need to add the progress to the file reader not the image. The img.onload you have is only to display the image that was loaded by the fileReader .

So add your progress event handler to reader. Also to avoid an error in your code as the progress event does not always know what is coming check if file length is known. If the size is not known show the number of bytes loaded.

reader.onprogress = function (event) {
    var str, p;
    
    if (event.lengthComputable) {   // does the progress know what's coming
        p = (event.loaded / event.total) * 100;   // get the percent loaded
        str = Math.floor(p) + "%";    // create the text
    } else {
        p = event.loaded / 1024;   // show the kilobytes
        str = Math.floor(p) + "k"; // the text
        p = ((p / 50) % 1) * 100;   // make the progress bar cycle around every 50K
    }

    $('#ProgressBar').css('width', p + '%');
    $("#sp_progressCount").html(str);
}

---

Related Topics