在 iframe 页面内容加载时显示加载 gif答案

【问题标题】：Show a loading gif while iframe page content loads在 iframe 页面内容加载时显示加载 gif
【发布时间】：2012-08-21 15:13:47
【问题描述】：

我搜索并尝试了各种解决方案来解决我想要实现的目标，但无济于事......

我正在开发一个摄影网站，该网站在 iframe 中加载了大量图像，这需要一些时间来加载。我想在 iframe 中显示加载 gif 图像，直到图像完成加载。

这里是有问题的网站，http://www.chriszachary.com/portfolio

我正在使用 javascript 动态库来允许用户使用鼠标控制图像滚动。在页面完全加载之前，图像不会滚动。为了帮助减少混乱，我认为加载 gif 图像会更有效，但我无法将其拉下来。如果您点击任何投资组合类别（婚礼、订婚、肖像），您会注意到加载图像需要很长的等待时间。

如果有人可以让我知道如何在 iframe 中实现这一点，请告诉我。如果您可以具体说明使用什么代码以及在哪里使用，我是新手：|

先谢谢了，期待答案:)

【问题讨论】：

标签： html iframe loading show gif

【解决方案1】：

用下面的 HTML 替换该页面中的 IFRAME 标记。 IFRAME 被 DIV 覆盖，加载图像（或任何图像）所在的位置。图像位于DIV 区域的中心，其大小最大为 950x633 像素。当IFRAME页面加载时，加载图片会被隐藏。

您需要更改的是您网站的图片网址。您可能还想更改DIV 背景颜色（当前设置为#FFF）。

<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>

【讨论】：

这一切都对我有用，除了 - gif 最终位于我的 iframe 顶部并且永远不会消失。有什么建议吗？
为了回答我自己的评论，我将 #loadImg 上的 z-index 调整为 -1，并在 iframe 周围添加了一个 div 包装器，z-index 为 999。不确定这是否是最处理它的优雅方式，但它似乎在我的网站上工作。
您的回答很好，但是您需要给 iframe 一个 ID 或类添加一些 css，否则加载在 iframe 之上，例如：iframe.myclass {position:relative ; z-index:1000}
请不要使用 z-index: 1000

【解决方案2】：

你可以使用jquery在iframe加载时触发

$('#iframeTest').on("load", function () {
    console.log('iframe loaded'); //replace with code to hide loader
});

【讨论】：