[thelist] image onload event
Jon Hall
jonhall at ozline.net
Tue Jan 8 05:46:57 CST 2002
This has been driving me crazy for the last few hours. I must be missing
something, I need a sanity check..
I need to guarantee that an image is fully loaded before firing a
function. Easy enough in html with the onload parameter, but I am
preloading a larger image after a user clicks on the thumbnail, then
using the height and width of the image to open a popup of the same size
as the image. The images are uploaded to the site by users, for viewing
by different users.
I dont want to preload every larger image when the page loads, so that
option is out.
Storing the height and width of the larger image in the database when
the image is uploaded is an option, but I'd like to stay away from that
if possible.
The code works seems to in IE6, but not Mozilla...argh. This may be just
be reflecting the fact that IE can create the image object faster than
Moz or it is smart enough to wait until the image is loaded until moving
on though.
Here is my code. This is going to wrap bad...
openNew('pictureUrl')
function openNew(imgPath) {
var imgPath = imgPath;
var imgSrc = new Image();
imgSrc.src = imgPath;
//before this line I need to make sure that this image is fully
loaded or the height and width properties will return incorrect values.
showImage(imgPath,imgSrc);
}
Nothing wrong with this function, just including it just in case someone
knows a better way...
function showImage(imgPath, imgSrc) {
var h = imgSrc.height;
var w = imgSrc.width;
var msgWindow = window.open('popup.cfm','popup',config='height=' + h
+ ',width=' + w +
',screenX=200,screenY=200,top=200,left=200,resizable=no,menubar=no,scrollbars=no');
msgWindow.document.open();
page="<html><head><title>sample</title></head><body
onload='self.focus()' onblur='self.close()' leftMargin='0' topMargin='0'
border='0' background=" + imgPath +"></body></html>";
msgWindow.document.write(page);
msgWindow.document.close();
}
this.jon
More information about the thelist
mailing list