Google chrome chrome在渲染后如何渲染图片

我只是发现一件有趣的事情，当你改变一个元素的src时，它会有几秒钟的延迟，它下面的行会在新图片渲染之前执行，所以如果你想在改变图片的src后立即得到图片的大小，它会加载后一个图片的大小（宽度-高度）

证据如下：

$（“按钮”）。单击（functon（）{//设置一个按钮，以便处理该过程

var alert1 = $("#image").width(); //#image is an <img> element, don't set width and height.

var src = pictures.pop(); //pictures is an array which stored image base64 code.

$("#image").attr("src", src);

var alert2 = $("#image").width();

alert("alert1: " + alert1 + " alert2: " + alert2);

var alert1 = $("#image").width(); //#image is an <img> element, don't set width and height.

var src = pictures.pop(); //pictures is an array which stored image base64 code.

$("#image").attr("src", src);

alert("wait");

var alert2 = $("#image").width();

alert("alert1: " + alert1 + " alert2: " + alert2);

var alert1=$（“#image”）.width（）；/#image是一个
}

如代码所示，执行后，alert1应显示更改src前图片的宽度，alert2应显示更改src后图片的宽度

但我实际看到的是什么？alert1和alert2都显示了更改src之前图片的宽度

为了加强我的观点，还有一个经验：


$（“按钮”）。单击（functon（）{//设置一个按钮，以便处理该过程

var alert1 = $("#image").width(); //#image is an <img> element, don't set width and height.

var src = pictures.pop(); //pictures is an array which stored image base64 code.

$("#image").attr("src", src);

var alert2 = $("#image").width();

alert("alert1: " + alert1 + " alert2: " + alert2);

var alert1 = $("#image").width(); //#image is an <img> element, don't set width and height.

var src = pictures.pop(); //pictures is an array which stored image base64 code.

$("#image").attr("src", src);

alert("wait");

var alert2 = $("#image").width();

alert("alert1: " + alert1 + " alert2: " + alert2);

var alert1=$（“#image”）.width（）；/#image是一个
}

看到了吗？我在change src之后添加了一个警告框，这样我就可以控制代码在change src之后执行，然后发生了什么，alert1返回change src之前的图片宽度，alert2返回change src之后的图片宽度！所以证明了src的过程是在代码执行之后完成的

我想知道的是为什么会发生这种情况，当chrome改变图片的src时发生了什么

ps：我只是在chrome上尝试一下，如果你对此感兴趣，可以在其他浏览器上进行同样的exp。
这可能是因为图像尚未加载。为什么不将代码放在img的
onload
事件中？这样，在图像完全加载之前它不会启动。
非常感谢，jquery.load（）是有帮助的。