Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
HartleySan

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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Sorry, you said "loaded" and I read "uploaded". What about downloading a low res version of the image first and displaying that, then use Javascript to load the better image?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...