Using Javascript to check if image has loaded?

[Tarzan]

Hi!

I guess there's an easy fix for this but I really can't find it. I'm not really into javascript so bear with me

On the title page of my online game I use javascript to display screenshots.
I use an invisible fixed ("absolute") positioned div (display: none) as a target for the screenshots.

When a user clicks on a thumbnail, I call a function called showScreenshot(image).

This function sets the background of the div to the appropriate screenshot, e.g.

if(image=='admin')
    targetDiv.style.backgroundImage = "url(images/ss_administration.png)";

I then set the opacity of the Div to 0, turn on the display and call a fade in function.

    setOpacity(targetDiv,0);
    targetDiv.style.display = 'block';
    fadeIn('screenshots-target', 0);

Works nicely. At least when your browser has cached the screenshots. Otherwise the empty div is displayed for a second or so until the image has loaded which occurs everytime you visit the page for the first time.

Is there a good way to make the fadeIn function wait until the image has loaded? (I guess "onload" is usable somehow? Maybe I should use an img tag inside the div instead of setting the background?

Of course I could always preload all fullsized screenshots, but I don't want to do that for every visit since not all visitors will look at them.

If you want to see the code in action, visit www.metropolisonline.org

[misson]

Is there a good way to make the fadeIn function wait until the image has loaded? (I guess "onload" is usable somehow? Maybe I should use an img tag inside the div instead of setting the background?[/URL]

This is exactly how you do it. Use an image element and register the fade-in function as a "load" event handler on the image element. Whenever you change the source, the handler will be invoked when the new image finishes loading.

You have to use an image element because only certain elements will fire the load event. Since a background image isn't an element but styling, events don't apply. Generally, the document and replaced elements support load. The DOM event standard only specifies that load fires for documents, frames and object elements, but browsers often support load for other elements.

[gouri78]

I've got a function that runs after an image is loaded. The only problem is, if the image is loaded already, the .onload doesn't register so the function doesn't run. Is there a way to check if the image is loaded already?

var img = new Image();
img.src = "http://example.net/picture.jpg";
img.onload = showImage;

[LostHorizon]

Hi "Gouri78",

Question: How do you know if the function "showImage()" won't run? Is it because that you didn't see the image got displayed?

Anyway, to answer your question (that is, if I understand it correctly), there is a problem with your codes (in particular, with the order of the execution of your codes). To fix the problem, you'll need to specify the onload event function handler FIRST before you "preload" the image as follows:

var img = new Image();
img.onload = showImage;

img.src = "http://example.net/picture.jpg";

and this will fix your problem (the problem with your codes is that if the image is already in the browser's cache, the browser will load it RIGHT AWAY/IMMEDIATELY before the onload event handler is even set, thus resulting in the function never being called/executed).

---------- Post added at 09:03 PM ---------- Previous post was at 08:31 PM ----------

Also, for your information:

Is there a way to check if the image is loaded already?

If the image "is loaded already" (already in the browser's cache), then the image's dimensions (width and height) would have been AVAILABLE. You can check to see if either one of them is of "number" type (this would mean that the image "is loaded already").

Hope this helps.

[Tarzan]

Just a related question, if I use createElement('img') it seems like the img node is created as an open tag (inspected it with FireBug), i.e.,

<img src="target">

but of course I want a self-closing tag, i.e.,

<img src="target" />

Is there a way to create a self-closing tag with createElement?

[misson]

Firebug isn't showing you a source view, it's showing you a DOM tree. The only place there's such a thing as a self-closed tag is in HTML source. Moreover, you don't need to be too concerned with the HTML source that someone else's code generates.