Download progress of a jpeg image in Javascript

[x-mob]

Hi,
Long way to go, i am thinking about using Javascript (ajax) to read incoming jpeg data in kiloBytes and display it live in % the download progress. The jpeg image must be only displayed after the download is completed with some kind of crossfading effects.
The jpeg images are big, like 900KB to 1.4M, they are hi-res 2048x1534 pics.

Is this thing possible ?

Thank you very much.

[jscheuer1]

On the face of it, this doesn't seem advisable. The mere size of the image itself disqualifies it for practical use on the web.

[x-mob]

On the face of it, this doesn't seem advisable. The mere size of the image itself disqualifies it for practical use on the web.

See this: http://oxblue.com/demo/?siteID=3edf8...5238da6&demo=1
Ok, this is is Flash, but hi-res pics exists and it will forever. See the way the progress bar is working after going to next or previous images etc... That's a true preloading progress bar. Just hoping to do it in Javascript.

Thanks.

[jscheuer1]

The images in the demo you supply are like only 89K to 600k (for enhanced). With or without flash, with or without javascript, don't use a 900K+ image.

[x-mob]

The images in the demo you supply are like only 89K to 600k (for enhanced). With or without flash, with or without javascript, don't use a 900K+ image.

I understand your point. Btw, most of our images are around 300k to 700k. Some hi-res very hi quality pics like medical purpose are bigger in size, up to 2M.

Anyone with an idea ? It must be a way to do this in Javascript.

Thanks.

[Twey]

The mere size of the image itself disqualifies it for practical use on the web.

I'm going to have to disagree with this. Non-central large images are impractical, when the user just wants to read the page but has to wait for all these huge images to download instead. When the purpose of the page is to display that image, and the user presumably knows what to expect, it's OK.
x-mob: No, I don't believe there is. Javascript is a client-side language, and so doesn't provide much access to the mechanisms of HTTP. The only thing I can think of would be to store the loading time for something else, then use that to produce a reasonable estimate of how long the image should take.

[jscheuer1]

If you are trying to imitate the flash presentation you gave as an example. My advice would be simply to reverse engineer it and add your own style and images. Still, be advised, even with a broadband connection and the advantages in image loading flash provides, that demo is already pushing the upper limit. Anything less than broadband working to at least 90% efficiency will crawl, even with the files used in the demo. However, if you just want to present your images and want a javascript assist on loading w/progress bar of the type in the flash demo, this will, as you know, require more than mere javascript. One tool javascript alone can offer is background caching of images, something you should consider if you cannot be dissuaded. Few people have the size monitor that can take advantage of the images you are proposing. With optimization, you may be able to trim them down quite a bit without sacrificing enough quality to render them unsuitable. For detail views, image details would be a far better route to go than using an enormous file that you are simply going to zoom in onto a portion of.

[x-mob]

Thank you guys,

I 've found an image uploader in Javascript (ajax) that show the uploading progress rates of a file, can be any kinds. http://nodivisions.com/uploaddemo/

How they did this ? this mean that if we can do it for upload, we can do it for download too! I can use a server side script if required like they use for the upload.


jscheuer1, i don't want to reproduce the demoed Flash interface, i used it as an example for the progress bar, the way it should works for me. Just another thing, the big jpeg images i'm talking about are used mostly on private networks like Intranet or even fast local area networks and i just heard about 20M files jpeg are now used in the company... The progress bar is needed more that ever now :-)

[Twey]

It uses server-side technologies.

if we can do it for upload, we can do it for download too!

Not really, no. I suppose it's remotely possible to create a custom image downloader with AJAX. However, once you've downloaded the image to a Javascript variable, there isn't a lot you can do with it. Existing methods don't permit client-side image generation.