在加载 iframe 之前显示 loading.gif答案

【问题标题】：Displaying loading.gif before iframe is loaded在加载 iframe 之前显示 loading.gif
【发布时间】：2012-02-27 05:01:57
【问题描述】：

所以我有这个按钮，点击它会将您发送到下一张幻灯片 (void(0))。下一张幻灯片是iframe，仅当您单击按钮时才会加载。在 iframe 完全加载之前，动画 GIF 应该显示出来，然后在内容完全加载后隐藏。

在我的例子中，GIF 从不显示。在 iframe 完全加载之前，它是完全空白的。怎么了？

这是脚本：

<script type="text/javascript"> 
    function hideLoading() { 
        document.getElementById('loading').style.display = "none"; 
        document.getElementById('edtwo').style.display = "block"; 
    } 
</script>

按钮：

<span id="nextBtn1"><a href="javascript:void(0);"
onClick='document.getElementById("edtwo").src="ed2.html";'></a></span>

还有下一张包含 GIF 和 iframe 的幻灯片：

<li><div id="loading"><img src="_img/loading.gif" alt="Loading"/></div>
<iframe id="edtwo" onload="hideLoading()";></iframe></li>

【问题讨论】：

onload="hideLoading()"; ; 外部的 " 应该被删除或移动到它旁边的引号内。不知道为什么，但我最近经常看到很多这种特殊的小错误。 `:`
@JaredFarrish 谢谢，但这只是一个错字。和 ;删除，它仍然无法正常工作。按钮中使用的 getElementByID 和脚本中使用的 getElementByID 之间可能存在冲突。我想我应该包含 .click 作为一个函数。
您能否提供指向您页面的链接（或fiddle）？没有任何 CSS，“按钮”是不可点击的，因为锚点没有内容。
我知道这是一个错字，不会解决问题；我说这是一个小错误。说到手头的问题，我创建了一个演示，我认为你描述的方式是：jsfiddle.net/2mgDw 注意，我必须更新标记，并且为iframe 设置src 的代码只是意在迫使iframe 隐藏更长时间；这并不是为了演示解决方案的任何部分。
@Rob W：当然。这里：semiconia.com/test/indexloadonclick.html 点击编辑下的箭头。这将加载只有几 kb 的第二张幻灯片。所以它应该不会花很长时间来加载。但它仍然没有显示 GIF。我尝试过加载较重的 iframe，加载时间要长得多，但仍然没有 GIF 的迹象。

标签： javascript jquery css iframe gif

【解决方案1】：

问题在于您的 iframe 最初是显示的（而且，添加到 DOM 树中）。尽管它的 src 属性为空，但它会加载空页面并执行 onload 事件处理程序。因此，由于调用 hideLoading，您的指标将被隐藏。

正如您在this 示例中所见，onload 触发无需点击链接。

您可以从DOM树中删除框架并在用户单击“下一步”按钮时添加它，或者此时将.style.display更改为gif加载器的空字符串（以显示它）。

【讨论】：

“您的 iframe 最初显示”是指它是预加载的？并不真地。转到我刚才使用 FF 放置的链接。当您单击编辑下的箭头时，您将看到网页部分刷新。查看选项卡，您会看到网站的名称消失了，不久之后又重新出现。这意味着它与服务器成功通信。
但是，如果您的意思是没有内容的 iframe 最初就在那里。是的，对我来说，这真的没有错。应该加载内容，而不是 iframe。由于 Div 标签（包含 loading.gif）在 Li 中这个 iframe 之前，最糟糕的情况是它会将不可见的 iframe 向下推，如果父 Div 标签中的溢出设置为隐藏，则不会出错。
当前，当页面加载时，它还会加载 iframe 内容（由于为空或未设置 src 属性，该页面为空页面）。这会触发 onload 事件并隐藏加载程序。所以它在页面加载时被隐藏（用户甚至没有点击任何东西）。
iframe 上的 onload 在单击链接时仍会触发，并运行 hideLoading() 处理程序。
那你有什么建议？（请以对菜鸟友好的方式。：D 我不是真正的程序员）。