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>

Answer 2

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

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

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

2 个答案: