| Hello,
This is my first post on this forum. Any help would be much appreciated. Here is my problem:
I have a web page http://www.freewaymedical.co.uk/productsindex.php, which is basically 5 slideshows that navigate the product range of a client of mine. The slideshows work fine, but I would like to improve the users experience by showing the user a "loading" image while the images for each slideshow are being downloaded from the server.
I have been playing with the onLoad function of the javascript Image object as this seemed to be the way forward. However, my tests with this function have been unsuccessful. Basically, when a large gif file is preloaded, the onLoad function should be called. When I load the page, the onLoad function is called straight away, even though the image has not yet been loaded into memory.
I know this because the gif could not possibly have downloaded in this time and when i include the image in the page, it takes ages to appear.
Here is the page I used to first test the function:
<html>
<head>
<script language="JavaScript">
// create an image object
objImage = new Image();
// preload the image file
objImage.src='http://antwrp.gsfc.nasa.gov/apod/image/0308/abyss_amanda_big.jpg';
// set what happens once the image has loaded
objImage.onLoad=imagesLoaded(objImage);
// function invoked on image load
function imagesLoaded(x)
{
alert(x.src + " has loaded");
}
</script>
</head>
<body>
<p>testing</p>
</body>
</html>
What I get is the alert popping up straight away, when I would expect the image to take at least 5 seconds to download and then the popup message to appear.
Any ideas what I am doing wrong? |
