IE7-8 игнорирует выборочное игнорирование jquery image .load () и / или содержимого функции .load

Question

Я пишу довольно сложное меню, управляемое AJAX, с несколькими уровнями, которые анимируются вокруг, позволяя пользователю в какой-то момент перемещаться по сложной древовидной структуре. Мне пришлось добавить функцию, которая автоматически центрирует (vert и horz) изображения, связанные с каждымпункт в дереве меню.Чтобы измерить изображения и расположить их соответствующим образом, я должен сначала записать их в скрытый div ("#tempHolder"), как только они .load (), затем я могу получить их размеры, вычислить мои смещения и затем записать изображения в DOM вподходящее место.

Все это работает. Хорошо, в браузерах, соответствующих стандартам, но IE7-8, похоже, обрабатывает команду .load () только тогда, когда им это нравится.(домашняя страница, меню загружается нормально, первое посещение подстраницы разбивает меню, обновление указанной страницы исправляет ее снова ... и т. д.).Я реструктурировал свою функцию, чтобы сделать объявление .load () рано из-за совета, который я прочитал здесь (http://blog.stchur.com/2008/02/26/ie-quirk-with-onload-event-for-img-elements/), но это, похоже, не сработало. Я также добавил e.preventDefault из-за потока stackOverflow, который сказал, что это может помешатьIE от кэширования моих операторов загрузки.

Вот функция, вызывающая проблемы:

 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);
        }

Так как это для большого клиента, а сайт еще не запущен, я не могу показатьсайт, но я постараюсь добавить несколько снимков экрана позже.

Любая помощь очень ценится.

Answer 1

Это довольно распространенная проблема, и если изображения уже находятся в кеше, некоторые браузеры (скажу прямо - IE?) Не могут вызвать события загрузки для них. Следовательно, существует метод обхода проблемы.

// 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
}