SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
-
Jun 28, 2007, 08:10 #1
- Join Date
- Aug 2006
- Posts
- 49
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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,
WFLast edited by wuckfit; Jun 28, 2007 at 08:11. Reason: speeling mistake!!
-
Jun 29, 2007, 05:57 #2
- 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>
-
Jun 29, 2007, 21:56 #3
- 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
-
Jun 30, 2007, 04:37 #4
- 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