如何在我的iframe加载时向我的页面添加加载指示符？ [英] How do I add a loading indicator to my page while my iframe loads?

问题描述

我目前正在创建一个页面，点击一个链接后，iframe被插入到一个div中，并且它的内容被加载。我使用以下jQuery调用完成此操作：

I am currently creating a page where upon clicking a link an iframe is inserted into a div and it's contents loaded. I do this using the following jQuery call:

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

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

Sometimes the source content loads very slowly and, as a result, it looks like nothing is happening. I would like to have a simple loading animation while the content is loading while the iframe's content loads. When the iframe finishes loading it's content should pop in and the loading animation should go away.

我一直在考虑一些方法，我可以做到这一点（例如，单独使用loader div只是简单地将两者互换），但我不确定解决这个问题的最佳方法是什么。也许我不应该使用.html（）？如果有更正确的解决方案，我很乐意提供建议。

I've been considering a couple ways I could do this (e.g. having a separate loader div to simply swap the two in and out) but I'm not sure of what the 'best' approach to solving this problem is. Perhaps I shouldn't be using .html()? I'm open to suggestion if there is a more correct solution.

推荐答案

有什么理由不能听 onload iframe自身的事件？它应该在孩子内容加载后触发。

Is there any reason you can't listen to the onload event of the iframe itself? It should fire after the child content has loaded.

类似于这样：

Something like this:

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

这篇关于如何在我的iframe加载时向我的页面添加加载指示符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！