如何在 iframe 加载时向页面添加加载指示器？

我当前正在创建一个页面，单击链接后，iframe 将插入到 div 中并加载其内容。我使用以下 jQuery 调用来执行此操作：

$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');

有时会加载源内容very慢慢地，结果看起来什么也没有发生。我希望在 iframe 内容加载时有一个简单的加载动画。当 iframe 完成加载时，它的内容应该弹出，并且加载动画应该消失。

我一直在考虑几种方法来做到这一点（例如，有一个单独的加载器 div 来简单地将两者交换进出），但我不确定解决这个问题的“最佳”方法是什么。也许我不应该使用 .html()？如果有更正确的解决方案，我愿意接受建议。

有什么原因让您无法收听onloadiframe 本身的事件？它应该在子内容加载后触发。

像这样的事情：

showLoader();
$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');
$('#mydiv iframe').load(function() { hideLoader(); }