"Van der Weij" <news@vanderweij.demon.nl> wrote[color=blue]
> Hi,
>
> I want to preload some images for a webpage _and_ determing their width[/color]
and[color=blue]
> height.
> The problem is that the scripts continue while the images are loaded in[/color]
the[color=blue]
> 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[/color]
on[color=blue]
> 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();
>[/color]
___________________________________
setTimeout does not 'pause' a script,
the script below this keeps right on
going about it's business regardless.
What you will likely need to do is separate
the lines below into a separate function and call
that when your counter reaches 0.
____________________________________
[color=blue]
> // 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 +"'>";[/color]
___________________________________
Note that you do not have im_array[x].width anywhere, only
im_array[x].height
___________________________________
[color=blue]
> }
>
> 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>[/color]
