ページ読み込み中にCSSポップアップを開いて、ページ読み込みが完了したらCSSを閉じる方法

読み込みに20-30秒かかるWebページがあります。ページの読み込みが完了すると閉じるポップアップ（「しばらくお待ちください...」）を開くことは可能ですか？私は以下を試しましたが、うまくいきません。ページは、ポップアップは表示されません。私は開発プラットフォームとしてFirefoxを使用しています。条件を反転すると（#container hidden/noneとclosePopup（）がvisible/blockにリセットされます）、完全に動作します（ページのロードが完了するとポップアップが表示されます）。 2番目の質問として、私はこれを働かせても、それは非常にブラウザに依存するでしょうか？ありがとう！ページ読み込み中にCSSポップアップを開いて、ページ読み込みが完了したら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タグの最初の属性として実行されますが、後で本体の中に入るまでポップアップに内容を入力しませんでした。 scriptタグでdefer属性を使用します。そのため、ポップアップを閉じるスクリプトは、ページの解析が完了するまで実行されません。同様に、

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

第2の質問に答えるには、defer属性を使用すると現実的にすべての最新のブラウザで動作します。 Safari、Chrome、Firefox 3.6以降、Opera 15.0以降、Edge 10.0以上

出典

2016-08-05 23:54:22 Boysenb3rry

W3によると、defer属性は

ページ読み込み中にCSSポップアップを開いて、ページ読み込みが完了したらCSSを閉じる方法

答えて

関連する問題