Javascript to only display animated gif when loaded -

i have animated gif banner on website around 2mb. people slow connections, want include javascript display (and start playing) gif when loaded, rest of website display whilst gif still loading. ideally, have 1 image (loading.gif) displayed first, , switched banner (banner.gif) javascript when banner.gif loaded.

how do this? (i'm new javascript)

thanks!

you can using image object, (do when want start loading banner, in onload):

var banner = new image(); var loading = new image(); var bannerelement = document.getelementbyid("banner"); // assumes element id "banner" contains banner image - can element want. banner.src = "location/of/the/image.gif"; loading.src = "loading.gif"; banner.onload = function() {      bannerelement.removechild(bannerelement.lastchild);      bannerelement.appendchild(banner); }; bannerelement.removechild(bannerelement.lastchild); bannerelement.appendchild(loading); 

your banner element should this:

<div id="banner"><img src="location/of/the/image.gif" alt="banner" /></div> 

this 1) bannerelement.removechild part work , 2) keep principles of progressive enhancement people without javascript aren't left out.