异步还是同步？当我们设置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

更改src是异步的。

代码

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

将立即返回，浏览器将在另一个线程中加载新图像。在完全加载之前，<img>标记的所有属性都不正确，例如宽度或高度。

因此$(image).width()可能无法返回新图片的宽度。

正如@Dereleased指出的那样，你可以实现一个'on load'方法，该代码只有在图像加载完成后才会执行。 jQuery的load()可以轻松实现这一目标。

Answer 3

  

var img = new Image（）;

这是创建图像的旧方法，已被弃用。首选document.createElement('IMG')或通过字符串和innerHTML创建一个。

现在，图像为replaced elements，这意味着它们会在到达时加载，但如果指定了尺寸，则会在布局流程中为它们保留空间。 （如果没有，则保留图标大小的空间，当图像的尺寸在标题中到达时，屏幕会重新绘制;这可能会令人不安的用户体验，因此建议您在呈现页面时准备好图像尺寸第一次。）

Answer 4

同意@dereleased图像预加载是异步完成的;我想补充一点，有很多方法可以在javascript中的Image（）对象上使用这种技术，比如使用数组或事件处理程序。

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