Image Gallery in JS

Image Gallery JavaScript

[Jaec]

Hi all,
I writted a small code in JS, it makes to one page to switch between images ("next image" "prev image").
In my JS code I have:

document.getElementById("image").src = "image" + num + ".jpg"

I'm using the getElementById method and the src property for change the image's url.

My problem is, when the user click in the link for change the image, the browser appears to "do nothing", then when the browser load completely the image, it is displayed, I'm worried about the user think "this doesnt work" and close the window. What can I do for change this, for example, the "waitting" cursor or something else...

I hope you all can understand my question, english isnt my first language.

Thanks a lot.
Joel

[edited by: Jaec at 7:14 pm (utc) on June 29, 2004]

[Bernard Marx]

You need to pre-load the image into the browser's cache. There are 2 ways to do this:

#1. Create an image object, and assign it to a global variable.

var image1 = new Image()
img1.src = "blah_blah.jpg"

#2. Write an image into the HTML, but give it invisible:

<img src="blah_blah.jpg" style="display:none;">

The benefit of #1 is that your image changing function can have this line instead:

document.getElementById("image").src = window["image" + num].src

Even better would be to put your preloaded images into an array, then access them:

document.getElementById("image").src = myImages[num].src

Don't worry about the English!

[Jaec]

Hi Bernard Marx,
Firstly, I'm sure that I readed your name before in some book.

Thanks for your reply, I already know about preloading images, but in my experience, when the user open the first page of my gallery, haves to wait to all images are preloaded, am I wrong? If my gallery haves 20 or more images this will be exasperating independently of the images' size...

Any idea?
Thank you again.

Joel

[Bernard Marx]

..then perhaps you'd like "The Doors of Perception" too.

You are absolutely right about the preloading. It wouldn't be appropriate here. You could take into account the fact that web users know that, when they are using an image gallery, there will be a short delay between their action, and the image appearing. Sometimes it seems that, apart from for heavy flash objects etc, "image loading" messages, and other things are just a load of unnecessary fluff.

The image-waiting cursor seems simple enough. You could apply it to the whole page, or just on the link in question. Once we have a reference to the link, then we can apply it:

theLink.style.cursor = "wait" // apply
theLink.style.cursor = "" // remove

But I wouldn't apply it to the whole page, and have second thoughts about its application to the link. This behaviour, especially on the page, is quite often displayed when your PC is hanging, and about to crash!

[Nutter]

Understand that I have very little experience w/ JS, and it is mostly input validation stuff; but I had an idea.

What if you do it as two image swaps. The first to an image of "Image Loading..." which could be a two color GIF so it'd be pretty small. Then load the next image into the <img> tag. Or, load the second into a hidden image and then swap it.

Honestly, I don't know if this is even a good idea in practice; but I've done stuff like this in VisBasic when I had problems with image load times.

- Ryan

[Bernard Marx]

It's not such a bad idea in theory. The "image loading" image could be pre-loaded, so it doesn't have to be totally basic, but A div with text/"loading image" image in would be better. The steps would be:

1. Click calls function; sends image path to function.
2. Function
a] shows "loading" div with message.
b] creates a new Image object, and assigns it to a global (that you have for the purpose)

theLoadingImage = new Image()
theLoadingImage.onload = function(){ statements to hide "loading" div}
theLoadingImage.src = path

/* This is where the problem with a temporary image would come in. You would be assigning the first path, then immediately assigning the main path. This might not give the browser any time to show the "loading" image. So a separate, positioned div is better. */

3. When the image has loaded, the function that we set in #2 hides the div.

..and it's all done.
Have a go with this, but read on...

A small problem occasionally reared up, when I tried this. I had an image gallery, with thumbs on the side - all with blue borders. When a thumb was clicked, a new Image object was created, and the src of the dummy transparent image in the display was set to the fullsize image path. When the image loaded the thumb's border went red. The reason for this was that I was putting the Image objects into an array. If a user clicked a number of thumbs, the last one clicked would eventually be the one to show in the display, but they would all be downloaded [more about that later]. The border would signify their availability

I was finding that, very occasionally, images would appear but their thumb borders were still blue. My assumption was that, if an image is already in the cache, then sometimes its onload event is not triggered. You might end up with the image, but with the "loading" message still there.

Solutions can involve setting timer loops to query -sometimes proprietary- properties, like readystate. The simplest solution might be to set a timer on the div that hides it after a certain period of time if it is not already hidden.

I mentioned loading all images clicked. If you just use a single global var to hold your new Image object, then this won't happen. This may be a good thing. My approach had a flaw. I have seen worse. I saw a gallery recently that preloaded when the thumb was moused-over. Trying to click a thumb in the middle would result in multiple download events behind the scenes.

Browsers are limited by convention to, I think, 3 concurrent server requests. If the user clicks five images, then they will have to wait a long time for anything to actually appear.

[Jaec]

Thanks to you all for your replies.

I will try to implement your solutions, when I have the final code I will post the url here.

Thanks again.

Joel