IE7-8 ignoring selectively ignoring jquery image .load() and/or contents of .load function

I'm writing a rather complex AJAX driven menu with multiple levels that animate around allowing a user to navigate a complicated tree structure at some point I had to add a function that auto centers (vert and horz) the images associated with each item on the menu tree. In order to measure the images and position them accordingly I must first write them to a hidden div ("#tempHolder") once they .load() I can then get their dimensions, calculate my offsets and then write the images to the DOM in the appropriate place.

This all works A Okay in the standards compliant browsers but IE7-8 seem to only process the .load() command when they feel like it. (homepage the menu loads okay, first visit to a sub-page breaks the menu, refreshing said page fixes it again...etc.). I restructured my function to make the .load() declaration early because of the advice I read here (http://blog.stchur.com/2008/02/26/ie-quirk-with-onload-event-for-img-elements/) but that doesn't seem to have worked. I also added e.preventDefault because of a stackOverflow thread that said this might preven开发者_如何学Got IE from caching my load statements.

Here is the function causing the issues:

 if (this.imagePath != "") {

            runImage = function (imagePath, $itemEle) {

                var $itemEleA = $itemEle.find('a');
                var image = new Image();

                //$thisImage = $(image);

                $(image).load(function (e) {

                    //alert('image loaded')
                    $(image).evenIfHidden(function (element) {
                        //alert('even if hidden');
                        ////////////console.log($thisImage);
                        var elementWidth = element.width();
                        var elementHeight = element.height();

                        this.imageHeight = elementHeight;
                        this.imageWidth = elementWidth;


                        //alert('widthoffset = ' + widthOffset + 'imagewidth = ' + imageWidth + 'this.imageWidth = ' + this.imageWidth + 'elementWidth = ' + elementWidth);

                        var imagePaddingWidth = 230 - imageWidth;
                        var widthOffset = imagePaddingWidth / 2;
                        widthOffset = widthOffset + "px";

                        element.css("left", widthOffset);

                        var imagePaddingHeight = 112 - imageHeight;

                        if (imagePaddingHeight < 0) {
                            var heightOffset = imagePaddingHeight;
                            heightOffset = heightOffset + "px";

                            element.css("top", heightOffset);

                        }
                        if (imagePaddingHeight > 0) {
                            var heightOffset = imagePaddingHeight - 18;
                            heightOffset = heightOffset + "px";

                            element.css("top", heightOffset);
                        }

                    });

                     $(this).appendTo($itemEleA); 

                    e.preventDefault();
                    return image;
                });

                image.src = imagePath;

                //var tempvar = $itemEle.find('a');
                $(image).appendTo("#tempHolder");
            }

            this.image = runImage(this.imagePath, $itemEle);
        }

Since this is for a big client and the site is not yet live I can't show the site but I'll try to throw up some screen shots later.

Any help is greatly appreciated.

---

It is quite a common problem, and if the images are already in the cache some browsers (shall I say directly - IE?) fails to trigger load events on them. Hence there is a technique for a workaround.

// After this line of your code
image.src = imagePath;

// put this
if (image.complete || image.naturalWidth > 0) { // if image already loaded
    $(image).load(); // trigger event manually
}