如何在Chrome15之後渲染一張圖片

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前的圖像的寬度，警報2應該顯示圖像的變化的src後的寬度。

但我真的看到了什麼？ alert1和alert2都顯示改變src的圖片寬度。

，以提高我看來，還有另外一個EXP：

$("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的處理過程是在代碼執行後完成的。

我想知道爲什麼會發生這種情況，鉻改變圖片的src時發生了什麼？

ps：我只是在chrome上試試這個，如果你對此感興趣，可以在其他browdser上做同樣的exp。

Answer 1

這可能是因爲圖像尚未加載。爲什麼不把代碼放在img的onload事件中？這種方式直到圖像完全加載後纔會啓動。