之后，chrome如何渲染图片？

Question

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

以下是证据：

 `$("button").click(functon() {  //set a button so you can handle the process.`

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

}

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

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

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

 `$("button").click(functon() {  //set a button so you can handle the process.`

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

}

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

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

ps:我只是在chrome上试一下，如果你对此感兴趣，可以在其他浏览器上做同样的exp。

Answer 1

这可能是因为图像尚未加载。为什么不把代码放在img的onload事件中呢？这样，在图像完全加载之前，它不会触发。