Getting an image's 'real' width and height in IE

Question

I'm currently building a site and using the Shadowbox JS plugin to display images.

Because we serve up images via a JSP (rather than linking directly to image files), Shadowbox seems unable to dynamically determine their width and height and so just opens the images in an overlay of ~the screen size.

It's possible to manually pass in widths and heights to the shadowbox plugin using 'rel', so I've got around the problem for FF/Chrome/Safari using the following code:

$('#pic1img').attr("src")).load(function() {
            picWidth    = this.width;
            picHeight   = this.height;
    });

 $(window).load(
            function() {
                var w = $("#pic1img").width();
                var h = $("#pic1img").height();
                if( picWidth < w ){ picWidth = w; }
                if( picHeight < h ){ picHeight = h; }
                $('#pic1').attr('rel', 'shadowbox[pics];height=' + picHeight + ';width=' + picWidth);
            }
 );

But I can't find any way to do the same in IE.

Answer 1

The code actually worked once I began loading the thumbnails at full size and then setting their width and height after load.

The issue was that I was setting a surrounding div to

display: none 

until the images were loaded and IE can't work out the sizes of hidden images.

Resolved this by setting

visibility: hidden

instead.