javascript - 在 Javascript 中，设置 Image src 属性通过什么机制触发图像加载？

Question

在使用 Javascript 操作 DOM 时，您早期学到的东西之一是以下模式:

var img = new Image();   // Create new Image object
img.onload = function(){
  // execute drawImage statements here
}
img.src = 'myImage.png'; // Set source path

据我所知，一般来说，设置对象属性时不会有副作用。那么触发图片加载的机制是什么呢？这只是魔法吗？或者我可以使用类似的机制来实现支持并行模式的 Foo 类吗？

var foo = new Foo();   // Create new object
foo.barchanged = function(){
  // execute something after side effect has completed
}
foo.bar = 'whatever'; // Assign something to 'bar' property

我隐约知道Javascript getters and setters 。 Image.src 就是这样触发加载的吗？

Answer 1

当前未指定 Image.src = ... 触发加载的机制，但WebIDL完成后会改变这一点。 (4.4.5 Attributes 是现在讨论这个的部分；这可能是最终建议中的内容，但我尽量不预测这些事情的 future ——太容易在匆忙中预测，而在闲暇时后悔。)浏览器基本上使用您注意到的 getter 和 setter 来实现这一点(只是使用浏览器中实现的“ native ”函数来支持它们，类似于 document.appendChild 是一个带有“ native ”浏览器提供的实现背后)。其他人对 DOM getter 和 setter 的方法与用户可定义的 getter 和 setter 的方法完全不同。 (这就是为什么，你不能在 Firefox 4 beta 中使用 Object.getOwnPropertyDescriptor 来检查 DOM getter 和 setter。这是我们最终会修复的问题，但我们已经没有时间来做这件事了。我认为是 Firefox 4。)

目前的答案是:“如何”尚未明确，但很快就会明确。