1

Is there any way to show "percentage-load-bar" while loading an image in js? In other words I want to use this:

var img = new Image();
img.onload = function() {
  document.querySelector('#percents').innerHTML = 'all done';
};

img.onreadystatechange = function(e) {
  document.querySelector('#percents').innerHTML = e.percentsLoaded;
};

img.src = 'http://example.com/image.png';
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Dmitrii Sorin
  • 3,855
  • 4
  • 31
  • 40
  • 1
    To do that you will need the actual file size, which can be found here http://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript/1310399#1310399 – Ibu Apr 24 '11 at 20:45
  • You will also need intermediate progress events, which sadly don't exist in Javascript :( – Halcyon Apr 24 '11 at 21:59

1 Answers1

2

Javascript has no intermediate events for loading resources. You can however show a loading bar if you are loading more than one image but I'm guessing that's not the case.

If you do really want this I think the only solution is to use Flash, which can do a number of fancy things but .. well .. it's Flash :/

Look at some of the big album-image hosting sites and see if they have a solution.

Halcyon
  • 57,230
  • 10
  • 89
  • 128