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

Question

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

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

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

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