如何在頁面加載期間打開一個css彈出窗口，然後在頁面加載完成時關閉它

我有一個網頁需要20-30秒才能加載。是否可以打開一個彈出窗口（「Please wait ...」），然後在頁面加載完成時關閉？我嘗試了以下，但它不起作用。頁面按照預期的方式加載，除了一個：沒有彈出窗口。我使用Firefox作爲我的開發平臺。當我反轉條件（使#container hidden/none和closePopup（）重置爲visible/block）時，它完美地工作（當頁面加載完成時彈出窗口）。作爲第二個問題，即使我得到這個工作，它會非常依賴於瀏覽器嗎？謝謝！如何在頁面加載期間打開一個css彈出窗口，然後在頁面加載完成時關閉它

<html><head><style> 
#container{ 
    width : 100%; 
    height : 100%; 
    top : 0; 
    position : absolute; 
    visibility : visible; 
    display: block; 
    background-color : rgba(22,22,22,0.5); 
} 
#popup{ 
    position : relative; 
    margin: 0 auto; 
    top: 35%; 
    width : 300px; 
    padding : 10px; 
    border : 1px solid black; 
    background : yellow; 
    box-shadow: 5px 5px 5px #252525; 
} 
</style> 
<script language="javascript"> 
    function closePopup(){ 
     document.getElementById('container').style.visibility = "hidden"; 
     document.getElementById('container').style.display = "none"; 
    } 
</script></head><body onload="closePopup();"> 
<div id="container"><div id="popup">Please Wait...</div></div> 
20 seconds worth of stuff happens here. 
</body></html>

來源

2016-08-05 JBH

寫入的方式是運行腳本在彈出窗口加載前關閉彈出窗口。關閉彈出框的腳本被加載到head標籤中，然後作爲body標籤的第一個屬性執行，但是直到稍後在body中才會將任何內容輸入到彈出框中。在腳本標記中使用defer屬性。因此，在頁面完成分析之前，不會運行關閉彈出窗口的腳本。像這樣：

<script language="javascript" defer> 
function closePopup(){ 
    document.getElementById('container').style.visibility = "hidden"; 
    document.getElementById('container').style.display = "none"; 
} 
</script>

要回答第二個問題，使用defer屬性幾乎適用於所有現代瀏覽器。包括Safari，Chrome，Firefox 3.6 +，Opera 15.0+和Edge 10.0+

來源

2016-08-05 23:54:22 Boysenb3rry

根據W3，延遲屬性屬於

相關問題