comp.lang.javascript archive
Re: Preloading images, and getting their height and width (firefox)
Date: Sat Jul 23 2005 - 01:24:45 CEST
"Van der Weij" <news@vanderweij.demon.nl> wrote
> 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();
>
___________________________________
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.
____________________________________
> // 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 +"'>";
___________________________________
Note that you do not have im_array[x].width anywhere, only
im_array[x].height
___________________________________
> }
>
> 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>
Received on Tue Oct 18 03:00:08 2005