加载iframe页面内容时显示加载gif

Question

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

我正在一个摄影网站上工作,该网站在iframe中加载了大量图像,这需要花费一些时间来加载.我想在iframe中显示加载gif图像,直到图像加载完毕.

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

我正在使用javascript动画库来允许用户使用鼠标控制图像滚动.在页面完全加载之前,图像不会滚动.为了帮助减少混淆,我认为加载gif图像会更有效率,但我无法将其拉下来.如果您点击任何投资组合类别(婚礼,订婚,肖像),您会发现加载图像的等待时间很长.

如果有人可以让我知道如何在iframe中实现这一点,请告诉我.如果你可以具体说明使用什么代码和在哪里,我是一个新手:|

在此先感谢,期待一个答案:)

Answer 1

IFRAME用下面的HTML 替换该页面中的标记.在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>