javascript preloader/progress/percentage

Question

I'm having trouble finding any good information on how to make a javascript(or jquery) progress bar WITH text that tells you the percentage.

I don't want a plug in, I just want to know how it works so that I can adapt it to what I need. How do you preload images and get a variable for the number of images that are preloaded. Also, how do you change html/css and-or call a function, based on the number of images that are loaded already?

Solution 1

<img> elements have an onload event that fires once the image has fully loaded. Therefore, in js you can keep track of the number of images that have loaded vs the number remaining using this event.

Images also have corresponding onerror and onabort events that fire when the image fails to load or the download have been aborted (by the user pressing the 'x' button). You also need to keep track of them along with the onload event to keep track of image loading properly.

---

Additional answer:

A simple example in pure js:

var img_to_load = [ '/img/1.jpg', '/img/2.jpg' ];
var loaded_images = 0;

for (var i=0; i<img_to_load.length; i++) {
    var img = document.createElement('img');
    img.src = img_to_load[i];
    img.style.display = 'hidden'; // don't display preloaded images
    img.onload = function () {
        loaded_images ++;
        if (loaded_images == img_to_load.length) {
            alert('done loading images');
        }
        else {
            alert((100*loaded_images/img_to_load.length) + '% loaded');
        }
    }
    document.body.appendChild(img);
}

The example above doesn't handle onerror or onabort for clarity but real world code should take care of them as well.

Solution 2

What about using something below:

$('#btnUpload').click(function() {
    var bar = document.getElementById('progBar'),
        fallback = document.getElementById('downloadProgress'),
        loaded = 0;

    var load = function() {
        loaded += 1;
        bar.value = loaded;

        /* The below will be visible if the progress tag is not supported */
        $(fallback).empty().append("HTML5 progress tag not supported: ");
        $('#progUpdate').empty().append(loaded + "% loaded");

        if (loaded == 100) {
            clearInterval(beginLoad);
            $('#progUpdate').empty().append("Upload Complete");
            console.log('Load was performed.');
        }
    };

    var beginLoad = setInterval(function() {
        load();
    }, 50);

});

JSFIDDLE

You might also want to try HTML5 progress element:

<section>
<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>

<script>
var progressBar = document.getElementById('p');

function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
} </script>
</section> 

http://www.html5tutorial.info/html5-progress.php

Comments

[heckascript]

How would I do that with a given number of images though? instead of just an animation of a set length... I have 41 images that I need to preload.

[heckascript]

also the html5 progress element doesn't seem to be supported by all browsers, I am trying to make something that will work for all devices and browsers.

[heckascript]

what would the syntax look like for something like this: 1. Find the number of img's to be loaded. 2. begin loading those images. 3. Tell me the percentage of images loaded based on the total number of img's being equal to 100%. 4. onload, if percentage of images = 25% then do something, else 50%, else 75%, etc...

[slebetman]

1. Find the number of img to be loaded: this you should know before hand right? You're the one loading/preloading the images after all.

[slebetman]

2. HTML can only load images 2 ways: using img tag or as background image of elements. So that's how you begin loading images - create img elements or create divs/spans and set their background. Preloading works because browsers will even load images that are hidden.

[heckascript]

lol sorry, that should have been more obvious to me. What I mean is just how do I have javascript find the number of images to load?

[slebetman]

You need to clarify what finding the number of images to load mean. Searching for all img tags in the DOM? I thought this was about preloading images.

[heckascript]

yeah, all images in the document... is it just document.images?

[heckascript]

what does the 'document.body.appendChild(img);' do? because the code is working fine without it...

[slebetman]

I was assuming you were preloading the images - not dynamic loading them. Preloading means loading images that is not in the page yet but may be inserted into the page some time in the future. The technique is to add hidden img tags to the page to force the browser to cache the images that you want to insert later (like icons in menus etc).

[slebetman]

What you're doing instead is allow the page to function before all images are loaded and load the images in the background. That's not preloading. Different people have different names for it but I call it dynamic loading.

[heckascript]

let us continue this discussion in chat

[dgnin]

Although it's unnecessary, I think it would be good practise delete all the images when they are preloaded.