設置圖片的源代碼是否也加載源代碼？

Question

說我有下面的代碼：

var img = document.createElement('img'); 
img.src = 'https://somePicture.png'; 

是否立即得到加載與源的數據的圖像，即使我不圖像的DOM追加？換句話說，即使我不向用戶顯示圖像，是否可以使用img.onload()進行回調？

Answer 1

是的，設置source屬性將加載圖像。

您可以將一個加載事件附加到圖像上，如果當前不在頁面上，則設置source屬性也是預加載圖像時最常用的方法，以防止在圖像交換過程中撕裂頁面。

4.7.1 img元素

在瀏覽上下文，其中腳本被禁用時，用戶劑可以立即或按需獲取圖像。在啓用腳本的瀏覽環境中，用戶代理必須立即獲取圖像。

無論何時使用src屬性創建該元素，立即獲取圖像的用戶代理都必須同步更新img元素的圖像數據。只要該元素的src或crossorigin屬性設置，更改或刪除，立即獲取圖像的用戶代理也必須同步更新img元素的圖像數據。

https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element