设置图片的来源是否也会加载来源？

Question

说我有以下代码：

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

即使我没有将图像附加到DOM，图像是否会立即加载源数据？换句话说，即使我没有向用户显示图像，我还可以使用img.onload()进行回调吗？

Answer 1

是的，设置source属性将加载图像。

您可以将加载事件附加到图像，如果当前不在页面上，则设置源属性也是预加载图像时最常用的方法，以防止在图像交换期间在页面上撕裂。

  

4.7.1 img元素

     

在禁用脚本的浏览上下文中，用户代理可以立即或按需获取图像。在启用脚本的浏览上下文中，用户代理必须立即获取图像。

     

只要使用src属性创建该元素，立即获取图像的用户代理就必须同步更新img元素的图像数据。每当该元素设置，更改或删除其src或crossorigin属性时，立即获取图像的用户代理还必须同步更新img元素的图像数据。

     

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