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

Question

I have a web page that takes 20-30 seconds to load. 我有一个网页需要20-30秒的加载时间。 Is it possible to open a popup ("Please wait...") that then closes when the page finishes loading? 是否可以打开一个弹出窗口（“请稍候...”），然后在页面加载完成后关闭该弹出窗口？ I have tried the following, but it's not working. 我已经尝试了以下方法，但是它不起作用。 The page loads as expected in all ways but one: the popup doesn't appear. 该页面可以通过各种方式按预期加载，但有一种：不会显示弹出窗口。 I'm using Firefox as my development platform. 我使用Firefox作为开发平台。 When I reverse the conditions (make #container hidden/none and closePopup() resets to visible/block), it works perfectly (popup appears when page finishes loading). 当我反转条件时（使#container隐藏/无，并且closePopup（）重置为可见/阻止），它可以正常工作（页面加载完成后会弹出窗口）。 As a second question, even if I get this working, will it be enormously browser dependent? 第二个问题，即使我能解决这个问题，它是否也将很大程度上取决于浏览器？ Thanks! 谢谢！

<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

The way this is written it runs the script to close the popup before the popup is even loaded. 编写方式是运行脚本以在弹出窗口加载之前关闭弹出窗口。 The script to close the popup is loaded in the head tag and then executed as the very first attribute of the body tag, but you did not enter any contents into the popup until later on in the body. 关闭弹出窗口的脚本已加载到head标记中，然后作为body标记的第一个属性执行，但是直到稍后在主体中，您才将任何内容输入到弹出窗口中。 Use the defer attribute in your script tag. 在脚本标签中使用defer属性。 So that the script to close the popup is not run until the page has finished parsing. 因此，在页面完成解析之前，不会运行关闭弹出窗口的脚本。 Like so: 像这样：

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

To answer your second question, using the defer attribute works on practically every modern browser. 为了回答您的第二个问题，几乎所有现代浏览器都可以使用defer属性。 Including Safari, Chrome, Firefox 3.6+, Opera 15.0+, and Edge 10.0+ 包括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