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

Question

我有一个网页需要20-30秒的加载时间。 是否可以打开一个弹出窗口（“请稍候...”），然后在页面加载完成后关闭该弹出窗口？ 我已经尝试了以下方法，但是它不起作用。 该页面可以通过各种方式按预期加载，但有一种：不会显示弹出窗口。 我使用Firefox作为开发平台。 当我反转条件时（使#container隐藏/无，并且closePopup（）重置为可见/阻止），它可以正常工作（页面加载完成后会弹出窗口）。 第二个问题，即使我能解决这个问题，它是否也将很大程度上取决于浏览器？ 谢谢！

<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 个解决方案

解决方案1
0 已采纳 2016-08-05 23:54:22

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-05 23:54:22

解决方案1
0 已采纳 2016-08-05 23:54:22