Изменение размера изображений в Chrome с использованием JQuery

Question

Я только что столкнулся с самым странным из ошибок сегодня.Я не уверен, является ли это ошибкой в ​​Chrome или чем-то, что я могу обойти, но здесь идет речь.

Я создал функцию JQuery для изменения размера набора изображений, которые публикуются на форуме:

$(".post-message img.post-image").load(function(){
    $(this).each(function() {
        var maxWidth = 200;     
        if($(this).width() > maxWidth)
        {
            var factor = $(this).width() / maxWidth;
            var width = $(this).width();
            var height = $(this).height();
            $(this).css('width', width / factor);
            $(this).css('height', height / factor);
        }       
    });
});

Проблема в том, что это работает только при обновлении страницы.Он не работает, когда вы нажимаете предыдущий или когда вы получаете ссылку на страницу.

В chrome свойство $(img).width() возвращает 0 в обоих случаях, когда функция не работает.

Эта функция работает, как и ожидалось, в IE9 и FF3

Что я могу сделать, чтобы исправить это странное поведение?

Answer 1

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

Однако ...

В этом сценарии разработчики должны использовать максимальную ширину или высоту в CSS. На самом деле, хорошая практика программирования - делать все, что можно в CSS, прежде чем делать это в javascript.

Кроме того, если продолжать работу с этим решением, var width и var height следует поместить вне оператора if рядом с var maxWidth и использовать везде, где вызывается $(this).width() (включая начальную проверку строка 4). Прямо сейчас код без необходимости создает новый объект jQuery для получения высоты каждый раз, когда он должен был сохранить и использовать значение из первой проверки.

Answer 2

Скорее всего, потому что изображения извлекаются из кеша браузера, а событие load не запускается.Обходным путем является ручное срабатывание load, если были установлены свойства complete изображений:

$(".post-message img.post-image").one("load", function(){
    $(this).each(function() {
        var maxWidth = 200;     
        if($(this).width() > maxWidth)
        {
            var factor = $(this).width() / maxWidth;
            var width = $(this).width();
            var height = $(this).height();
            $(this).css('width', width / factor);
            $(this).css('height', height / factor);
        }       
    });
}).each(function() {
    if(this.complete) $(this).trigger("load");
});

Answer 3

Спасибо за вклад, ребята. Предыдущий ответ в стеке, который я не смог найти сегодня днем ​​ jQuery && Google Chrome , - решил мою проблему!

$(window).load(function() {
    $(".post-message img.post-image").one("load", function(){
        $(this).each(function() {
            var maxWidth = 200;     
            if($(this).width() > maxWidth)
            {
                var factor = $(this).width() / maxWidth;
                var width = $(this).width();
                var height = $(this).height();
                $(this).css('width', width / factor);
                $(this).css('height', height / factor);
            }   
            console.log($(this).width())    
        });
    }).each(function() {
        if(this.complete) $(this).trigger("load");
    });
});

Код должен быть выполнен на $(window).load() вместе с предоставленным кодом karim79.