I am preloading a large animated gif file. When fully downloaded, the animated gif will replace (swap out) a small static gif file.
So how do I test for when the image is fully downloaded? Using "onload=" in the BODY statement doesn't work because the web page has loaded (triggering the onload condition) but the image is still preloading.
Below is the real simple code I've written so far. As you can see, I have the swap event being triggered by a timer because I don't know when the animated gif has been fully downloaded. THanks!
------- Swap Image Code ----------------------
<html>
<script>
// Preload the large animated image
var image1 = new Image();
image1.src = "LargeAnimated.gif";
// Wait 19 seconds to be sure large image is downloaded then execute switchImage function
function timeLapse()
{
setTimeout("switchImage('logo')",19000);
}
// Routine to switch large image with small static image.
function switchImage(imageTagName)
{
document.images[imageTagName].src = image1.src;
}
</script>
<body onload="timeLapse()">
This is a test of preloading of an image. A large animated logo is being preloaded while a small static logo is displayed.
<img src="SmallStatic.gif" name="logo">
</body>
</html>
So how do I test for when the image is fully downloaded? Using "onload=" in the BODY statement doesn't work because the web page has loaded (triggering the onload condition) but the image is still preloading.
Below is the real simple code I've written so far. As you can see, I have the swap event being triggered by a timer because I don't know when the animated gif has been fully downloaded. THanks!
------- Swap Image Code ----------------------
<html>
<script>
// Preload the large animated image
var image1 = new Image();
image1.src = "LargeAnimated.gif";
// Wait 19 seconds to be sure large image is downloaded then execute switchImage function
function timeLapse()
{
setTimeout("switchImage('logo')",19000);
}
// Routine to switch large image with small static image.
function switchImage(imageTagName)
{
document.images[imageTagName].src = image1.src;
}
</script>
<body onload="timeLapse()">
This is a test of preloading of an image. A large animated logo is being preloaded while a small static logo is displayed.
<img src="SmallStatic.gif" name="logo">
</body>
</html>
