如何在iframe加载网站时显示加载gif？ [英] How to show loading gif while iframe is loading up a website?

问题描述

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

I have inc/content.php file which contains iframe with src= to my domain.

在我的 index.php 页面我有按钮< button id =nextButtononClick =viewNext（）; return false;> New< / button> 点击时跟随JavaScript函数调用：

On my index.php page I have button <button id="nextButton" onClick="viewNext();return false;">New</button> which when clicked calls following JavaScript function:

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

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

如何在 inc / content.php loading.gif 图像$ c>文件被加载到索引文件中？

How can I show loading.gif image while inc/content.php file gets loaded into index file?

推荐答案

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

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();
});

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

Obviously, you need an element in your document with the ID loading, like:

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

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