jQuery加载事件 - 使用中的差异

Question

很多时候我们在后台将图像附加到DOM之前通过jQuery加载图像

var image = $('<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />');
image.load(function(){
  //the image is now loaded and can be appended
});

尽管in the docs说明了这种方法存在一些警告（最终它不是100％可靠），但对于我们需要的方法来说，它是一种很好的方法。

采用这个原则，我想加载一个iframe并等待它继续加载

//method does not fire
var iframe = $('<iframe src="http://example.com"></iframe>');
iframe.load(function(){
  //the iframe is now loaded and can be appended
});

但是，与加载图像相比，看起来iframe需要在调用load事件之前在DOM中：

//method now fires
var iframe = $('<iframe src="http://example.com"></iframe>');
$("body").append(iframe);
iframe.load(function(){
  //the iframe is now loaded and can be appended
});

这是什么原因？我似乎无法在任何地方找到它。我知道在实践中，它很容易将样式设置为不显示，然后在加载后对其进行操作，但我更感兴趣的是为什么而不是如何。谢谢！