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事件中呢？这样，在图像完全加载之前它不会触发。