[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