如何在iframe加载网站时显示加载gif

How to show loading gif while iframe is loading up a website?

本文关键字：加载 显示 gif 网站 iframe      更新时间：2023-09-26

我有inc/content.php文件，其中包含src=到我的域的iframe。

在我的index.php页面上，我有一个按钮<button id="nextButton" onClick="viewNext();return false;">New</button>，点击它时会调用以下JavaScript函数：

<script type="text/javascript">
function viewNext()
{
  $('#content').load('inc/content.php');
}
</script>

函数将iframe从inc/content.php文件加载到index.php页面<div id="content"></div>

当inc/content.php文件加载到索引文件中时，如何显示loading.gif图像？

您可以在加载页面之前显示加载图像，并在加载完成时隐藏它(使用第二个参数添加回调，当请求完成时调用该回调(：

$("#loading").show();
$("#content").load("inc/content.php", function () {
    $("#loading").hide();
});

显然，您的文档中需要一个ID为loading的元素，如：

<img id="loading" src="loading.gif" alt="Loading">

<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>

而"loading"是包含loading.gif.的div的类名

对于loading.gif图像，您应该将其放入一个div中，该div可以"浮动"在页面的中心，如下所示：

HTMLCODE:

<div style="position:absolute; top:100px; left:50%;" class="loading">
     <img src="/img/loading.gif" />
</div>

您可以通过更改内联样式"top:…；left:…；"来更改加载图像的显示位置。如果您想在屏幕上定位加载基准，而不是页面的位置，请将position:absolute;替换为：position:fixed;(尽管这对IE不起作用(

如果你想让它看起来好看，这里是我在工作中使用的解决方案，它在屏幕上放一个模态，在中间放一个加载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>

它使用jquery.blockUI.js，它允许我屏蔽某个容器，可能是一个div，也可能是整个屏幕。

你需要的html就是这个

<img id="loading" style="display: none;" src="" />
相关文章：