SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Stop script execution until image has loaded...

    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
    Last edited by wuckfit; Jun 28, 2007 at 07:11. Reason: speeling mistake!!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


  3. #3
    SitePoint Evangelist dmsuperman's Avatar
    Join Date
    Feb 2005
    Location
    A box
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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();">
    <(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
    Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
    5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you know what, I didn't think that would work. Tested it in IE, and it works fine, in fact even better then mine.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •