Question

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

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

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

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

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

Answer 1

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

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

显然，您需要文档中的元素loading，例如：

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

Answer 2

<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，它可以“漂浮”在页面的中心，如下所示：

HTMLCODE：

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

您可以通过更改内嵌样式“top：...; left：....;”来更改加载图像的显示位置。如果您想在屏幕上设置加载基础而不是页面的位置，请将position:absolute;替换为：position:fixed;（尽管这不适用于IE）

Answer 3

如果你希望它看起来不错，这里是我在作业中使用的解决方案，它在屏幕中放置一个模态，在中间放置一个加载的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="" />

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

3 个答案: