Проблема ширины изображения в Google Chrome

Question

Я пишу простой плагин jQuery, который отображает изображения с определенным классом в центре экрана (при нажатии, полноразмерный).Я использую этот HTML-код, где отображается мое изображение:

<div id="source">
   <img src="" alt="" />
</div>

В атрибуте "src" я указываю путь к полноразмерному изображению, жду события загрузки, где я делаю анимацию с помощью jQuery:

$("#source img").load(function(){
var calcWidth = this.width + ...
}); 

Но в Google Chrome (и только в Google Chrome), когда срабатывает событие onload, this.width равно ширине предыдущего изображения.Это означает, что когда я впервые устанавливаю «src» на «img / 1.jpg» с шириной 800 пикселей, все в порядке, но когда я пытаюсь установить второе изображение «img / 2.jpg» в «src» с шириной 600 пикселей,this.width по-прежнему возвращает 800px (в событии onload!).
как объяснить это поведение?

UPD:
Я установил src следующим образом:

function NavClick(){
        $("#source img").attr({
            src: $(this).attr("src")
        });
        currentImage = this.indx;
    }

«this» ссылается на миниатюру изображения, я использую тот же src для миниатюрыи полноразмерное изображение только для тестирования, позже я помещу их в разные каталоги.
Этот код решает мою проблему, но я не совсем понимаю, почему:

function NavClick(){
        $("#source img").attr({
            src: "#"
        });
        $("#source img").attr({
            src: $(this).attr("src")
        });
        currentImage = this.indx;
    }

Перед установкой нового src Iустановите "#", возможно, это связано с кэшированием изображений, но отображается только в Google Chrome.

Answer 1

Использовать событие загрузки окна, изображение не полностью загружено в событии загрузки изображения (см. этот вопрос)

Я не проверял это, но это могло бы просто помочь, дайте мне знать, если это не так (или если это так)

$(window).load(function(){    
    var calcWidth = $("#source img").width() + ...;
});