javascript 如何在 iframe 加载网站时显示加载 gif？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7692633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show loading gif while iframe is loading up a website?
提问by Ilja
I have inc/content.php file which contains iframe with src= to my domain.
我有 inc/content.php 文件，其中包含带有 src= 的 iframe 到我的域。
On my index.phppage I have button <button id="nextButton" onClick="viewNext();return false;">New</button>which when clicked calls following JavaScript function:
在我的index.php页面上，我有按钮<button id="nextButton" onClick="viewNext();return false;">New</button>，单击该按钮时会调用以下 JavaScript 函数：
<script type="text/javascript">
function viewNext()
{
$('#content').load('inc/content.php');
}
</script>
Function loads iframe from inc/content.phpfile into index.phppage <div id="content"></div>
函数将 iframe 从inc/content.php文件加载到index.php页面中<div id="content"></div>
How can I show loading.gifimage while inc/content.phpfile gets loaded into index file?
如何loading.gif在inc/content.php文件加载到索引文件时显示图像？
回答by Lekensteyn
You can display the loading image before loading the page, and hide it when done (use the second parameter for adding a callback which is called when the request has completed):
您可以在加载页面之前显示加载图像，并在完成后隐藏它（使用第二个参数添加在请求完成时调用的回调）：
$("#loading").show();
$("#content").load("inc/content.php", function () {
$("#loading").hide();
});
Obviously, you need an element in your document with the ID loading, like:
显然，您需要在文档中使用 ID 元素loading，例如：
<img id="loading" src="loading.gif" alt="Loading">
回答by vantrung -cuncon
<script type="text/javascript">
function viewNext()
{
show_loading()
$('#content').load('inc/content.php' , hide_loading );
}
function show_loading(){ $('.loading').show() }
function hide_loading(){ $('.loading').hide() }
</script>
While "loading" is the classname of the div that contains loading.gif.
而“loading”是包含loading.gif 的div 的类名。
For the loading.gif image, you should put it into a div which can "float" at the center of your page like this :
对于 loading.gif 图像，您应该将其放入一个 div 中，该 div 可以“浮动”在您的页面中心，如下所示：
HTMLCODE:
HTML代码：
<div style="position:absolute; top:100px; left:50%;" class="loading">
<img src="/img/loading.gif" />
</div>
You can change the appearing position of the loading image by changing the inline style "top:... ; left:....;". If you want to posiion the loading bases on screen, instead of the page's position, then replace position:absolute;by: position:fixed;(although this won't work with IE)
您可以通过更改内联样式“top:...; left:....;”来更改加载图像的出现位置。如果您想在屏幕上定位加载基础，而不是页面的位置，则替换position:absolute;为：（position:fixed;尽管这不适用于 IE）
回答by eliel.lobo
If you want it to look nice, here is solution i use at job which puts a modal in the screen and a loading gif in the middle.
如果你想让它看起来不错，这里是我在工作中使用的解决方案，它在屏幕中放置一个模态，在中间放置一个加载 gif。
<script type="text/javascript">
function viewNext()
{
$('#loading').attr( 'src', 'some_path/loading.gif' );
$('#container').block( { message: $( '#loading' ) } );
$('#content').load('inc/content.php' , function(){ $('#container').unblock(); } );
}
</script>
it uses jquery.blockUI.js which allows me to block certain container, may be a div or the whole screen.
它使用 jquery.blockUI.js，它允许我阻止某些容器，可能是一个 div 或整个屏幕。
The html you need is this
你需要的html是这个
<img id="loading" style="display: none;" src="" />
