Stop script execution until image has loaded...

**wuckfit** · Jun 28, 2007, 07:10

Hello,

I've written a GUI toolkit which can be used like this:

var btn = new odin.ui.JButton(new odin.ui.ImageIcon("/img/cancel20x20.gif"));
var pnl = new odin.ui.JPanel(new odin.ui.layout.BorderLayout());
pnl.add(btn, "south");

.....

The problem I have is that in order to layout and size the panel and button I need to know the width and height of the image.

I've tried loading the image width and height using XHR/Servlet/JSON synchronously (so script execution blocks until the request returns) but this causes the browser to freeze for a period of time - which isn't ideal.

Using a onload event handler on the image seems to be unreliable e.g.

var img = new Image();

img.onload = function () {
...set the width and height...
}

img.src = "img/canel20x20.gif";

Sometimes this fires other times it doesn't...

Could any one offer an alternative solution or maybe someone has knowledge of how other toolkits do this (or perhaps the other toolkits don't do this...)

Any help of advice would be appreciated.

Oh, and the reason I wrote my own was because 2 1/2 eyars ago there wasn't any Dojo, YUI, EXT, JQuery etc...

Cheers,
WF

**gRoberts** · Jun 29, 2007, 04:57

only thing I can think of is this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" media="screen" />
        <script type="text/javascript">
            window.onload = function() {
                setTimeout(check, 1000);
            };
            function check() {
                var img = document.getElementById('test');
                if(img.offsetWidth > 0 && img.offsetHeight > 0)
                {
                    alert('Image has loaded');
                }
                else
                    setTimeout(check, 1000);
            };
        </script>
    </head>
    <body>
        
        <img id="test" src="http://www.attitudetravel.com/desktops/praha3.jpg" />

    </body>
</html>

The image is quite large to show it works. Basically it loops and checks to see whether there is a width, and once there is, it stops and shows you an message saying its loaded.

**dmsuperman** · Jun 29, 2007, 20:56

You could set the image's onLoad event to execute a function, similar to the above method but it would execute as soon as the image is loaded as opposed to checking every second.

<img src="blahblah" onLoad="functionOnceItsLoaded();">

**gRoberts** · Jun 30, 2007, 03:37

you know what, I didn't think that would work. Tested it in IE, and it works fine, in fact even better then mine.

The SitePoint Forums have moved.

User Tag List

Thread: Stop script execution until image has loaded...

Thread Tools

Display

Stop script execution until image has loaded...

Bookmarks

Bookmarks

Posting Permissions