Jump to content
Larry Ullman's Book Forums

Progress Bar


Recommended Posts

I'm hoping to make a progress bar in JS for when files are being loaded, and I'm wondering about the best approach to take.

 

Ideally, I'd like to code it myself and not rely on a library to do it for me. I really want to be able to understand the underlying mechanics.

 

It occurred to me that JS itself doesn't have access to how much of a file has been loaded, so maybe it would be necessary to use Ajax to every so many milliseconds call a PHP script to get that info.

 

Can anyone please shed some more light on the best approach?

Thank you.

Link to comment
Share on other sites

Sorry for the delay. I don't know the answer offhand, as I normally turn to a library or framework for these needs. From what I've deduced, this isn't possible in Javascript, so you do need a server-side solution to tap into. The pure Javascript solutions just seem to be intervals that increase an area's color, irrelevant to the actual progress.

 

In terms of a solution, this seems to be what you're looking for, even hand-coded: http://phpmaster.com/tracking-upload-progress-with-php-and-javascript/

  • Upvote 1
Link to comment
Share on other sites

Thanks a lot for the good response, Larry.

I did come across that tutorial the other day, and it was really good, as I now understand how to do progress bars for uploading files, but what I was really hoping for was a progress bar for the (down)loading of a large image already on the server.

 

From what I've found though, it doesn't look to be possible with JS or PHP (there is a Flash solution, but then the images have to be loaded in a Flash container; pass!). The only semi-solution out there seems to be to break the master image into smaller images, which can then have onload events attached to each of them, which then allows for the incrementing of a progress bar.

That is a possible solution, but I'm worried that by breaking the image into smaller pieces (and thus increasing the number of HTTP calls to the server), I will greatly slow down the loading of the full image. Maybe I'll test it out though, and see how much of an effect it actually has.

 

The problem is that at the moment, I'm using a CSS sprite implementation on a 3+ MB image, and all I'm doing while the giant image is loading is displaying one of those spinning GIF loader animations, but the problem is, on some systems, it can take up to 2 minutes to load the 3 MB image, which is a long time to make users stare at a spinning GIF. As such, I was hoping to implement a progress bar for the downloading of the image, so that the user has some idea of what's going on (and is given some hope).

 

Anyway, if I come up with a decent solution, I will report back. Thanks again.

Link to comment
Share on other sites

Yes, there are any number of options, and that's not a bad one. In the end, I ended up breaking the large image into smaller ones, and then creating a progress bar by calculating the number of pieces that have been loaded. Actually, it worked like a charm, so I'm satisfied.

Link to comment
Share on other sites

 Share

×
×
  • Create New...