Fade image after set time to reveal menu

Question

Can I have an opening gif animation fade to expose a menu and a static logo ? I want the fade timed to occur after the gif animation has had time to play once through. Then it will dissolve out -or maybe better yet- crossfade to a menu and a static logo. Thanks.

Answer 1

Is it an <img> element? If so:

• If you remove the <img> element, the page will reflow and the buttons will move up to "fill the gap".
• If you use display: none the image will not be visible and will take up no space (the page will reflow just as if you'd removed the <img>).
• If you use visibility: hidden, the <img> will be invisible, but will stay in place. The buttons will stay below the invisible image.

To remove an element or edit its CSS using JavaScript, you first need to get a reference to it. One way to do this is by giving it an id and using getElementById. You can then manipulate its style property or remove it from the DOM.

Regarding detecting when the gif animation is finished: there is no way that I know of to detect this using JavaScript and regular gif <img> elements. You'll have to rely on a setTimeout. Because loading time varies per visitor, you could start the timeout when the image has finished loading:

<img src="img/animation.gif" id="disappearing_image" />

var img = document.getElementyById('disappearing_image');
var runtime = 1200; // in milliseconds

img.onload = function() {
    setTimeout(function() {
        $(img).fadeOut("slow");
    }, runtime);
    img.onload = null;
};

This will fade out the image with the given id ("disappearing_image") after runtime milliseconds.

Note that I set the onload handler back to null once the event has been handled. This is because Internet Explorer will fire this event first when the image is loaded, and then for each frame of the animation.

One last note: different browsers may load animated gifs differently. For example, one browser may load the entire file before starting the animation, while another could animate the image while it's loading, then trigger onload and animate it again. If you run into trouble, you could look into preloading your image (search for "[javascript] preload img" here on SO).