Image not loaded in javascript handler for image onload method?

[mr0277]

I have a control wrapped in an UpdatePanel that is part of an iframe. The control grows on user's selection and images appear. Correspondingly I have to extend the iframe's height.

The problem is I get the iframe's height before appearing images are loaded, hence I get the content cutoff. So I have applied a solution suggested here (count the images and on each onload event decrease the counter and when it is zero resize the iframe with new height). The problem is I still get the images cutoff, and I see from Firebug debugger, when in onload handler, that images are still not loaded ! How could it be, it is the handler for the exact event! What is that I am doing wrong here? Did you have the same experience?

Here is the code section:

var imgNumber = 0;
var onImageLoad = function () {
    imgNumber--;
    if (imgNumber == 0) adjustIframeHeight();
};

function adjustIframeHeight() {
    var iframe = window.parent.document.getElementById(window.frameElement.id);
    var iframeHeight = getDocHeight(iframe.contentWindow.document);
    iframe.style.height = iframeHeight + "px";
}

function endRequest(sender, args) {
    ...
    imgNumber = jQuery('.ForBindingOnLoad').length;
    if (imgNumber > 0) {
        jQuery('.ForBindingOnLoad').each(function () {
            var tmpImg = new Image();
            tmpImg.src = jQuery(this).attr('src');
            tmpImg.onload = onImageLoad();
        });
    }
    else {
        adjustIframeHeight();
    }
}

and endRequest function is added to execute on every Ajax loading finished with

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

[Airshow]

Try establishing the onload handler before setting the src.

In other words have the two statements in the following order :

tmpImg.onload = onImageLoad;
tmpImg.src = jQuery(this).attr('src');

With cached images, this can matter.

Edit

Also, attach the handler with tmpImg.onload = onImageLoad not tmpImg.onload = onImageLoad()

[Troy III]

I'm not sure I understand your problem completely but since you mention events load status of img files, my advice is that:

• you can't rely on img onload event to fire consistently;
• they'll [images] start loading from the cache as soon as they get cached;
• Images loaded from the cache, will simply overrun the event notifier.

A no-cache scenario might work, but at what cost...?
Regards.