Hi,
I want to preload some images for a webpage _and_ determing their width and
height.
The problem is that the scripts continue while the images are loaded in the
background,
while I need the thus undefined values of image.width and image.height.
Thus I'm looking for a function which stops executing my script until the
images are all
fully loaded.
So anyone can help me?
Some non-working sample code included. Notice this only doesn't work well on
Firefox.
The code runs without errors, but it doesn't get the correct height and
width. To see the
problem the images used shouldn't be in the browser cache.
With best regards,
Rik van der Weij
<html>
<head>
<script>
var im_array = new Array(2);
var counter=2;
function LoadImages()
{
// load images
im_array[0] = new Image();
im_array[1] = new Image();
im_array[0].src = "images/1.jpg";
im_array[1].src = "images/2.jpg";
// hook events
im_array[0].onload = CounterMin;
im_array[1].onload = CounterMin;
}
function ShowImages()
{
// 'pre load the images'
LoadImages();
// wait till load complete (doesn't work)
WaitForLoad();
// display images
var t=document.getElementById("output");
t.innerHTML = t.innerHTML + "(h,w) = (" + im_array[0].height + ", " +
im_array[0].height + ")<br>\n";
t.innerHTML = t.innerHTML + "(h,w) = (" + im_array[1].height + ", " +
im_array[1].height + ")<br>\n";
t.innerHTML = t.innerHTML + "<img src='" + im_array[0].src +"'>";
}
function WaitForLoad()
{
if(counter>0)
{
window.setTimeout("WaitForLoad()",250);
}
}
function CounterMin()
{
counter--;
}
</script>
</head>
<body>
<input type="button" onclick="ShowImages()" value="Show Images">
<div id="output">
</div>
</body>
</html>
