我搜索并尝试了各种解决方案来实现我想要实现的目标，但无济于事......
我在一个摄影网站上工作，该网站在 iframe 中加载了大量图像，这需要一些时间来加载。我想在 iframe 中显示正在加载的 gif 图像，直到图像完成加载。
这是有问题的网站，http://www.chriszachary.com/portfolio
我正在使用 javascript 动画库来允许用户使用鼠标控制图像滚动。在页面完全加载之前，图像不会滚动。为了尽量减少混淆，我认为加载 gif 图像会更有效率，但我无法实现。如果您单击任何投资组合类别(婚礼、订婚、肖像)，您会注意到加载图像的等待时间很长。
如果有人能让我知道如何在 iframe 中实现这一点，请告诉我。如果您能具体说明要使用什么代码以及在哪里使用，我是新手:|
提前致谢，期待答案:)
最佳答案
用下面的 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>
关于html - 在 iframe 页面内容加载时显示加载 gif，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12136788/