Loading images

[Ivan Bútora]

I have recently looked at http://alistapart.com/articles/imagegallery
to implement a simple picture gallery on a webpage that I'm working on.

Everything works fine; however, I have one question. When I click on a
thumbnail, a JavaScript function is executed to change the picture in
the main view. Since some of these images are around 300KB, it takes up
to a couple of seconds to load the image. In Internet Explorer, one can
see the image loading and filling the screen. In Firefox or Opera, the
old image stays displayed until the new image is fully downloaded, and
only then the new image appears in its entirety. This is somewhat
annoying, because sometimes a new caption already appears, and the
viewer is still looking at the the old picture until the new one is
fully downloaded.

Is there anyway to do it so that also in Firefox and Opera, one will
see the new image as it is gradually loading? (as it happens if it was
loading directly from a HTML link, without using the JavaScript
function?)

Thanks,

Ivan

[Ivan Bútora]

For your reference, the gallery is here:
http://www.princeton.edu/~puttc/gallery.htm

If it's not possible to have Firefox and Opera "get rid" of the old
image as the new one is being loaded, would there be a way to implement
an onload event on the picture, and therefore the caption would only be
displayed once the picture is loaded?

Thanks,

Ivan

[cwdjrxyz]

Ivan Bútora wrote:

I have recently looked at http://alistapart.com/articles/imagegallery
to implement a simple picture gallery on a webpage that I'm working on.

Everything works fine; however, I have one question. When I click on a
thumbnail, a JavaScript function is executed to change the picture in
the main view. Since some of these images are around 300KB, it takes up
to a couple of seconds to load the image. In Internet Explorer, one can
see the image loading and filling the screen. In Firefox or Opera, the
old image stays displayed until the new image is fully downloaded, and
only then the new image appears in its entirety. This is somewhat
annoying, because sometimes a new caption already appears, and the
viewer is still looking at the the old picture until the new one is
fully downloaded.

Is there anyway to do it so that also in Firefox and Opera, one will
see the new image as it is gradually loading? (as it happens if it was
loading directly from a HTML link, without using the JavaScript
function?)

If you have only a few large images, perhaps preloading them would
help. You might put some text at the top of the page to hopefully keep
the viewer busy while images are being preloaded. If you have many
large images that are likely to be selected at random, there would seem
to be little you can do. On your example page, I see no problem,
because the large images load so rapidly on clicking. However I am
using DSL broadband that downloads at over 5 Mbps from my site.

[cwdjrxyz]

Ivan Bútora wrote:

For your reference, the gallery is here:
http://www.princeton.edu/~puttc/gallery.htm

If it's not possible to have Firefox and Opera "get rid" of the old
image as the new one is being loaded, would there be a way to implement
an onload event on the picture, and therefore the caption would only be
displayed once the picture is loaded?

It might be possible to modify code so that, when you click for a large
image, the caption of the old image is at once hidden by switching
visibility to hidden. This would require that all of the captions have
a unique id associated with each so that the clicking of the desired
image could get to the title using document.getElementById to switch
visibility from visible to hidden.

[Ivan Bútora]

cwdjrxyz wrote:

Ivan Bútora wrote:

For your reference, the gallery is here:
http://www.princeton.edu/~puttc/gallery.htm

If it's not possible to have Firefox and Opera "get rid" of the old
image as the new one is being loaded, would there be a way to implement
an onload event on the picture, and therefore the caption would only be
displayed once the picture is loaded?

It might be possible to modify code so that, when you click for a large
image, the caption of the old image is at once hidden by switching
visibility to hidden. This would require that all of the captions have
a unique id associated with each so that the clicking of the desired
image could get to the title using document.getElementById to switch
visibility from visible to hidden.

OK, thanks - I guess I can start playing around to implement some sort
of "Please wait while the picture is loading" message in place of the
caption of the old image - I'll have to do some reading on that, since
I'm sort of learning JavaScript "on the spot".

I was just wondering why Internet Explorer seems to do this differently
from Firefox and Opera. If the latter two behaved like IE in this
particular situation, I would not have the need to put in any extra
code, because with IE, the old image disappears once the new one starts
downloading. I guess on your 5 Mbps connection none of this matters. I
have what I consider a pretty fast connection here, but some of the
larger images took up to four-five seconds to load, which is what I can
probably expect in case of people with DSL or cable connections.

Ivan

[cwdjrxyz]

Ivan Bútora wrote:

cwdjrxyz wrote:

Ivan Bútora wrote:

For your reference, the gallery is here:
http://www.princeton.edu/~puttc/gallery.htm
>
If it's not possible to have Firefox and Opera "get rid" of the old
image as the new one is being loaded, would there be a way to implement
an onload event on the picture, and therefore the caption would only be
displayed once the picture is loaded?

It might be possible to modify code so that, when you click for a large
image, the caption of the old image is at once hidden by switching
visibility to hidden. This would require that all of the captions have
a unique id associated with each so that the clicking of the desired
image could get to the title using document.getElementById to switch
visibility from visible to hidden.

OK, thanks - I guess I can start playing around to implement some sort
of "Please wait while the picture is loading" message in place of the
caption of the old image - I'll have to do some reading on that, since
I'm sort of learning JavaScript "on the spot".

I was just wondering why Internet Explorer seems to do this differently
from Firefox and Opera. If the latter two behaved like IE in this
particular situation, I would not have the need to put in any extra
code, because with IE, the old image disappears once the new one starts
downloading. I guess on your 5 Mbps connection none of this matters. I
have what I consider a pretty fast connection here, but some of the
larger images took up to four-five seconds to load, which is what I can
probably expect in case of people with DSL or cable connections.

There is a low-tech method that has nothing to do with script that
likely could solve your problem. Make the caption part of the image.
Just take each image to PaintShop or some other like program. Enter a
background color you like and add the image. Then enter the caption
text and place it anywhere you like. Then crop to include the amount of
background area you want around the image that includes room for the
caption added. Output as jpg or any of several other formats. I can do
this simple editing very rapidly, but there is a learning curve if you
use such a program for the first time.

[Ivan Bútora]

It might be possible to modify code so that, when you click for a large

image, the caption of the old image is at once hidden by switching
visibility to hidden. This would require that all of the captions have
a unique id associated with each so that the clicking of the desired
image could get to the title using document.getElementById to switch
visibility from visible to hidden.

I was able to write some code in the end which shows a blinking wait
message while the picture is loading, and the caption loads only after
that.

Anyway, thanks for your help.