Javascript 在加载iframe之前显示loading.gif

因此，我有一个按钮，当点击它时，它会将您发送到下一张幻灯片（void（0））。下一张幻灯片是

iframe

，仅当您单击按钮时才会加载该幻灯片。 在

iframe

完全加载之前，应显示动画GIF，然后在内容完全加载后隐藏

在我的例子中，GIF永远不会显示。在

iframe

完全加载之前，它是完全空白的。怎么了

以下是脚本：

函数hideLoading（）{
document.getElementById（'loading'）.style.display=“无”；
document.getElementById（'edtwo'）.style.display=“block”；
} 

按钮：

下一张幻灯片包括GIF和iframe：

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

正如您在exmaple中看到的，onload在不单击链接的情况下触发

---

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

onload=“hideLoading（）”该
在
“
应删除或移动到其旁边的报价中。不知道为什么，但我最近经常看到这个小错误`@JaredFarrish谢谢，但那只是一个打字错误。具有如果移除，它仍然无法工作。按钮中使用的getElementByID与脚本中使用的getElementByID之间可能存在冲突。我想我应该包括。点击作为一个功能。你能提供一个链接到你的页面（或一个链接）？没有任何CSS，“按钮”是不可点击的，因为锚没有内容；我说这是个小错误。说到手头的问题，我创建了一个演示，我认为它是按照您描述的方式工作的：注意，我必须更新标记，为
iframe
设置
src
的代码只是为了迫使
iframe
保持更长时间的隐藏；这不是为了演示解决方案的任何部分。@Rob W:当然。此处：单击“编辑”下的箭头。这将加载只有几kb的第二张幻灯片。所以它应该不会花很长时间来加载。但它仍然没有显示GIF。我试过使用较重的iframe，加载时间要长得多，但仍然没有GIF的迹象。通过“最初显示您的iframe”您的意思是它是预加载的？不是真的。使用FF转到我刚才放置的链接。当你点击编辑下的箭头时，你会看到网页被部分刷新。查看选项卡，您会看到网站的名称消失，不久又重新出现。这意味着它成功地与服务器通信。但是，如果您的意思是没有内容的iframe最初在那里。是的，对我来说，这真的没什么错。应该加载内容，而不是iframe。由于Div标记（包含loading.gif）位于Li中此iframe之前，最糟糕的情况是它向下推不可见的iframe，如果父Div标记中的溢出设置为hidden，则不会出错。当前页面加载时，它还加载iframe内容（由于空或未设置src属性，该内容为空页面）. 这将触发onload事件并隐藏加载程序。因此，在加载页面时，它会隐藏起来（用户甚至没有单击任何内容）。单击链接时，
iframe
上的
onload
仍会触发，运行
hideLoading（）
处理程序。您有何建议？（请以一种友好的方式：D我不是真正的程序员）。