当iframe页面内容加载时显示加载gif动画

Question

我尝试了各种不同的解决方案，但都没能实现我的目标...

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

这是相关网站：http://www.chriszachary.com/portfolio

我使用JavaScript运动画廊来允许用户用鼠标控制图像滚动。 图像只有在页面完全加载后才开始滚动。 为了减少混淆，我认为显示一个加载gif图像会更有效，但我做不到。 如果您单击任何“作品集类别”（婚礼、订婚、肖像），您将注意到等待加载图像的显着时间。

如果有人能告诉我如何在iframe中实现这一点，请告诉我。 如果您能具体说明要使用什么代码以及放置在哪里，因为我是个新手 :|

提前感谢您，期待回答 :)

- Chris Zachary

Answer 1

将网页中的 IFRAME 标签替换为以下 HTML。该 IFRAME 被一个 DIV 包裹，在其中找到了加载图像（或任何图像）。 图像位于 DIV 区域的中心，其大小可高达 950x633 像素。 当 IFRAME 页面加载时，加载图像将被隐藏。

您需要更改的是您站点的图像 URL。 您可能还想更改 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>

- Jay

---

除了这个问题，其他都能正常工作——gif图像一直停留在我的iframe上，无法消失。有什么建议吗？ - Brandon Dorris

为了回答我的评论，我调整了#loadImg的z-index为-1，并在iframe周围添加了一个z-index为999的div包装器。不确定这是否是处理它的最优雅的方法，但它似乎在我的网站上运行良好。 - Brandon Dorris

你的回答很好，但是你需要给iframe添加一个ID或类，并且还要添加一些CSS样式，否则加载内容会覆盖在iframe上面，例如：iframe.myclass {position:relative; z-index:1000} - b_uk_happy

请勿使用 z-index: 1000。 - augurone

Answer 2

你可以使用jQuery来触发iframe加载完成的事件

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

- Ramesh Narayan