gpt4 book ai didi

javascript - 如何在页面加载期间打开 css 弹出窗口,然后在页面加载完成时关闭它

转载 作者:行者123 更新时间:2023-11-28 05:25:44 24 4
gpt4 key购买 nike

我有一个需要 20-30 秒才能加载的网页。是否可以打开一个弹出窗口(“请稍候...”),然后在页面加载完成后关闭?我尝试了以下方法,但没有用。该页面以所有方式按预期加载,但一种方式:弹出窗口未出现。我使用 Firefox 作为我的开发平台。当我反转条件时(使#container 隐藏/无并且 closePopup() 重置为可见/ 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>

最佳答案

按照这种编写方式,它运行脚本以在弹出窗口加载之前关闭弹出窗口。关闭弹出窗口的脚本被加载到 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+

关于javascript - 如何在页面加载期间打开 css 弹出窗口,然后在页面加载完成时关闭它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38798113/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com