Loading Big Image - Progress Bar 1

[Extension]

Hi,

I have to display some big images which are usually more than 900 KB. Since it can take a long delay to load the image, I was wondering if there is a function or module available to display a progress bar while loading the image ?

Any guidance would be appreciated.

Thank you

 

[BabyJeffy]

Here is one solution I came up with (that is HTML/CSS primarily):

I would suggest you grab one of the small aminated images from Ajax Load or napyfab and deliver that in the page... position it absolutely (so the big image will sit over the top of it) and give it a lower z-index (than the big image) or make it appear first in the markup (before the big image). When the big image has loaded, it will display on the page... and appear over the top of the animating "loading" image.

If you then chose to include javascript in the solution, then you could set an onload event on the big image to remove (or hide) the "loading" image.

Oh... the PHP part of this solution? Ummm... you could have an array of animated "loading" images server-side and choose which one to deliver to the page at random

Hope that gives you a starting point...

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[Extension]

Thanks Jeff for your input.

I was looking for a PHP solution but I must admit your solution is always an alternative.

Thank you

 

[Extension]

I just wanted to bring this thread up to get more advice.

Thank you

 

[dkdude]

Don't think it's possible using only PHP ...

As an alternative to BabyJeffy's solution, here's how I usually do it:

Make a container/wrapper div for the "big image". Let the container/wrapper div have an hour glass (or whatever you like) as a centered background-image. The background will be hidden once the "big image" has loaded.

A way to do it may be with AJAX -but then you depend upon JavaScript and browser compatability ...

Regards

 

[Miros]

Another way to do it is to "preload" the images (if this still works)...

Basically, at the end of your first page (which does not have big images on it), you put

<img src="bigimage.jpg" height=1 width=1>

at the very end just above the </body> tag.

While they're reading that first page, the image will load, be saved in the cache, and display as a little speckle on the page. When they navigate to the page with the actual image on it, it will already be in the cache and pop right up.

 

[bam720]

Also if you have access to the images you could make them progressive scans. This will load the image in the browers with increasing clarity until the full image is loaded. This is a common setting found in most Photo editing software, though it may only apply for JPEG's. Sorry this doesn't specifically answer your question but offers another alternative.