Question

我有一个需要20-30秒才能加载的网页。是否可以打开弹出窗口（“请稍候...”），然后在页面完成加载时关闭？我尝试了以下，但它不起作用。页面以各种方式按预期加载，但只有一个：弹出窗口不会出现。我正在使用Firefox作为我的开发平台。当我反转条件时（make #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标签的第一个属性执行，但是直到稍后在正文中才会在弹出窗口中输入任何内容。在脚本标记中使用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弹出窗口，然后在页面加载完成时关闭它

1 个答案: