Firefox ведет себя иначе, чем Safari и Chrome со значениями переменных jQuery

Question

Я использую замечательный плагин computedstyle.js , который получает вычисленный стиль объектов.Это позволяет мне манипулировать css вещами, которые вы обычно не должны делать, например, созданными изображениями.

Я могу взять источник изображения, который находится в ссылке, и изменить размер div корпуса и самого изображения.Обычно это можно сделать, только если вы знаете размер изображения.

1. Я создаю изображение
2. Я изменяю размер изображения
3. Затем я изменяю размер фрейма вокругэто зависит от размера измененного изображения.

Это работает в Chrome и Safari, но, конечно, не в Firefox, который, по моему мнению, быстро становится новым Internet Explorer.

Вопрос, есть ли способ заставить Firefox подождать, чтобы заметить изменение, а затем выполнить изменение размера iframe?

Чтобы увидеть, как он работает правильно в Chrome и Safari, перейдите на http://syndex.me. И не правильно, Firefox.

Не обязательно для вопроса, но если вам интересно, что я делаю, я удаляю предварительный просмотр галереи Tumblrs Photoset Post по умолчанию и заменяю его одним изображением.

if($(this).find('.html_photoset').length){
    $(".html_photoset").find("iframe").load(function(){
        var myFrame=$(this);                        
        $(this).contents().find('.photoset_row:not(:first-child)').each(function(){
            $(this).remove();
        })
    var psPre = $(this).contents().find('.photoset_row').find('a').attr("href");
    $(this).contents().find('.photoset_row').children(':not(:first-child)').remove();
        $(this).contents().find('.photoset_row').children(':first-child').children().remove();
        $(this).contents().find('.photoset_row').find('a').append("<img src='"+psPre+"'alt='Cover Page' />");
        $(this).contents().find('img').load(function(){
            var myCSS = $(this).getCSS(); //this is the plugin function
            var myY = myCSS.height.slice(0, - 2);
            var myX = myCSS.width.slice(0, - 2);
            $(this).closest(".photoset_row").css({height: myY});
            $(this).closest(".photoset_row").css({width: myX});
            $(this).css({maxHeight: (heightRef-0)});
            $(this).css({maxWidth: "auto"});
                    //after I've made the fixes to the image, I redo it for the iframe:
            var myCSS2 = $(this).getCSS();
            var myY2 = myCSS2.height.slice(0, - 2);
            var myX2 = myCSS2.width.slice(0, - 2);
            myFrame.height(myY2);
            myFrame.width(myX2);
            console.log(myY2);
        })                      
})
}

Answer 1

Это предостережение на странице .load() jQuery docs интересно:

Предупреждения о событии загрузки при использовании с изображениями

Распространенную проблему, которую разработчики пытаются решить с помощью .load () ярлык для выполнения функции, когда изображение (или коллекция изображения) полностью загружены. Есть несколько известных предостережений с это то, что следует отметить. Это:

Он не работает согласованно и надежно кросс-браузер

В WebKit не срабатывает корректно, если для src изображения установлено то же значение src, что и раньше

Не правильно всплывает дерево DOM

Может перестать срабатывать для изображений, которые уже находятся в кеше браузера

Итак, чтобы попытаться смягчить некоторые из них, я бы предложил попытаться добавить случайную строку запроса в конец изображения, чтобы избежать его кеширования и избежать установки src таким же, как раньше, и т. Д.

т.е.. измените строку psPre на:

var psPre = $(this).contents().find('.photoset_row').find('a').attr("href") + '?' + (Math.random() * 1000000);