在加載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加載器的空字符串（以顯示它）。