properly sizing an iframe that holds images of unknown dimensions

Question

Hi:

I have a C# webbrowser that holds an html page that has several iframes. Each iframe holds an arbitrary html file, often with images. The img tags often don't have any width or height attributes (ie, it's often just <img src="someimage.jpg">).

I've read about how to size iframes based on their content, and have gotten it to work using jquery. The following jquery snippet is present in the iframe's html:

$(document).ready(function() {
  $('img').each(function(){ 
        $(this) 
            .bind('load readystatechange', function(e) {
                var iframes = window.top.document.getElementsByName(window.name);
                if (iframes.length == 1) {
                    window.top.DoResizeFrame(iframes[0]);
                }
            })
    });

DoResizeFrame is defined in the parent html file (the one that the webbrowser is showing):

 function DoResizeFrame(fr) {
        if (fr && fr.Document && fr.Document.body) {
            fr.style.height = fr.Document.body.scrollHeight + 'px'; 
            fr.style.width = fr.Document.body.scrollWidth + 'px';
        }
    }

I also call DoResizeFrame from the parent document's $(document).ready event. This works great - if there are no images, the document's ready event triggers a resize. If there are images, each time an image is finished loading, the iframe is properly resized.

However, loading a large image causes the iframe to be improperly sized until the image is completely loaded. Since I rarely have the width and height attributes in the image tag to work with, I figured I could use jquery to listen to the readystatechange event of the image, and when it's "loading", pick up the size of the image and properly size the iframe even while the image is still loading. Unfortunately, at least in IE7, readystatechange=loading only happens after the image is done being downloaded.

Does anyone have any ideas how I can detect the size of an image referenced in my html simply by "<img src="someimage.jpg">" without waiting for the entire download to happen? I'm trying to provide the best user experience by sizing everything correctly, so that the user can read the rest of the iframe even if a large image is taking a while to download.

thanks! jean

Answer 1

One dependable way to be sure is to ask the server the size of the image before downloading it. I've done this using .net, it's quite easy.