当我的iframe加载时,如何在页面中添加加载指示符？

Question

我目前正在创建一个页面,在单击链接时,iframe将插入到div中并加载其内容.我使用以下jQuery调用执行此操作:

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

有时源内容加载速度非常慢,因此看起来没有任何事情发生.我希望有一个简单的加载动画,而内容加载时iframe的内容加载.当iframe完成加载时,它的内容应该弹出并且加载动画应该消失.

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

Answer 1

有什么理由你不能听onloadiframe本身的事件吗？它应该在子内容加载后触发.

像这样的东西:

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