異步或同步？當我們設置Image對象的src屬性時？

Question

var img=new Image(); 
img.src='xxxxx'; 

瀏覽器會等待圖像加載，然後執行下一個代碼行嗎？

Answer 1

該操作是異步的;很多圖片「預加載」代碼都依賴於該功能。

編輯：給一點點有用的信息以及。如果你希望有一定的操作同步等待圖像通過JavaScript的形象目標負載，可以使用onload事件，像這樣：

var img = new Image(); 
img.onload = function() { /* onLoad code here */ }; 
img.src = 'xxxxxx'; 

Answer 2

變種IMG =新的圖片（）;

這是創建圖像的舊方法，它已被棄用。首選document.createElement('IMG')或通過字符串和innerHTML創建一個。

現在，圖像是replaced elements，這意味着它們每當它們到達時都會加載，但如果指定了它們的尺寸，則在佈局流程中爲它們保留空間。 （如果沒有，則保留一個圖標大小的空間，當圖像以標題的形式到達時，屏幕會重新繪製;這可能會讓用戶感到不安，因此建議您在繪製頁面時準備好圖像尺寸第一次）

Answer 3

同意@dereleased圖像預加載是異步完成;只是想我會補充說，在JavaScript中的Image（）對象上使用這種技術有很多種方法，就像使用數組或事件處理程序一樣。

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

Answer 4

更改src是異步的。

代碼

image.src = "http://newimage-url";

將立即返回，瀏覽器將在另一個線程加載新形象。在完全加載之前，<img>標記的所有屬性都不正確，例如寬度或高度。因此$(image).width()可能不會返回新圖像的寬度。

正如@Dereleased所指出的那樣，您可以實現一個'on load'方法，該代碼只有在圖像加載完成後纔會執行。 jQuery的load()可以輕鬆實現。