How to set up progress bar timing?

Question

More specific, i want to make the bar fully loaded when the page is loaded, any way?

Answer 1

First thing that appear in my mind is store the number of image you want to load like.
var imgnum = document.getElementsByTagName("img").length

Then use that value as max for the progress bar.

Also create a variable for our counter.

var imgloaded = 0;

Then set up an onload listener to each image where it'll add imgloaded by 1.

for(let i = 0; i<imgnum ;i++){
document.getElementsByTagName("img")[i].onload
= ()=>{
imgloaded++
//Update progressbar
}
}

Answer 2

But the progress bar wont show if the page havent loaded yet.
Did you mean wait for resource like image to load first ?

Answer 3

Yes, that was i meant😅

Answer 4

Wow Taste! Its amazing! Thanks👍