如何在页面加载期间打开 css 弹出窗口，然后在页面加载完成时将其关闭

Question

我的网页需要 20-30 秒才能加载。是否可以打开一个弹出窗口 ("Please wait...")，然后在页面加载完成后关闭？我尝试了以下方法，但没有用。该页面以所有方式按预期加载，但一种方式：弹出窗口未出现。我使用 Firefox 作为我的开发平台。当我反转条件时（使 #container hidden/none 和 closePopup() 重置为 visible/block），它完美地工作（页面完成加载时出现弹出窗口）。作为第二个问题，即使我让它工作，它是否会极大地依赖于浏览器？谢谢！

<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>

Answer 1

这种写法运行是在弹出窗口加载之前关闭弹出窗口的脚本。关闭弹出窗口的脚本被加载到 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+

如何在页面加载期间打开 css 弹出窗口，然后在页面加载完成时将其关闭

How to open a css popup during page load then close it when the page load completes

html

javascript

css

popup

onload