在加载iframe之前显示loading.gif

Question

因此，我有这个按钮，单击该按钮会将您带到下一张幻灯片（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>

Answer 1

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

如您在本示例中所见，加载触发器无需单击链接即可触发。

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