在加载iframe之前显示loading.gif

Displaying loading.gif before iframe is loaded

本文关键字：显示 loading gif 加载 iframe      更新时间：2023-09-26

所以我有这个按钮，当点击它时，它会将您发送到下一张幻灯片（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>

问题是您的iframe最初显示（而且添加到DOM树中）。由于其空的src属性，它将加载空页面并执行onload

正如您在这个例子中看到的，onload触发器无需点击链接。

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

相关文章：