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

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

在我的index.php页面上，我有按钮New ，点击后调用以下JavaScript函数：

  function viewNext() { $('#content').load('inc/content.php'); }  

函数将inc/content.php文件中的iframe加载到index.php页面

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

Answer 1

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

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

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

Answer 2

而“loading”是包含https://stackoverflow.com/questions/7692633/how-to-show-loading-gif-while-iframe-is-loading-up-a-website/loading.gif的div的类名。

---

对于https://stackoverflow.com/questions/7692633/how-to-show-loading-gif-while-iframe-is-loading-up-a-website/loading.gif图像，你应该将它放入一个可以“漂浮”在页面中心的div，如下所示：

HTMLCODE：

您可以通过更改内联样式“top：…; left：….;”来更改加载图像的显示位置。 如果你想在屏幕上定位加载基础，而不是页面的位置，那么替换position:absolute; 通过： position:fixed; （虽然这不适用于IE）

Answer 3

如果你希望它看起来不错，这里是我在作业中使用的解决方案，它在屏幕中放置一个模态，在中间放置一个加载gif。

它使用jquery.blockUI.js，它允许我阻止某些容器，可能是div或整个屏幕。

你需要的HTML就是这个