您好，我正在尝试制作一个带有语言选择菜单的网站。选择语言后，将设置 cookie。如果您访问该网站，javascript 会将您重定向到包含所选语言内容的网页。 我的问题是在页面更改之前菜单可见 1 秒。我希望 javascript 在页面加载时定位到 location.replace 这是代码: HTML
<!DOCTYPE html>
<html>
<head>
<script src="javascript\indexscript.js""></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style\indexstylesheet.css">
<script src="javascript\indexscript.js""></script>
</head>
<body onLoad="checkCookie()">
<div id="overlay">
<div id="background">
</div>
<div class="popup-info">
<img class="flag" id="dutch" src="images\dutchflag.png" onclick="nl()">
<img class="flag" id="english" src="images\englishflag.png" onclick="en()">
<div id="textholder">
<h1 class="lang" id="NLtext">Welke taal spreekt u?</h1>
<h1 class="lang" id="ENtext">What language do you speak?</h1>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
/* dit maakt een div een background die geaniemeert kan worden*/
#background {
position: fixed;
top: 0px;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.85098);
z-index: 1;
color: white;
margin: 0 auto;
}
/* stijl van de div die voor de overlay moet komen*/
.popup-info {
top: 100px;
left: 0;
right: 0;
height: 450px;
width: 800px;
margin: 0 auto;
background: white;
position: fixed;
z-index: 2;
-webkit-border-radius: 25px;
}
/* de stijl van de vlaggen die samen veranderen*/
.flag {
border-style: solid;
border-color: black;
border-width: 1px;
height: 150px;
width: 300px;
cursor: pointer;
opacity: 0.6;
-webkit-border-radius: 3px;
}
/* individueel de vlaggen op de div plaatsen*/
#dutch {
position: relative;
float: left;
margin: 100px 0 0 50px;
}
#english {
position: relative;
float: right;
margin: 100px 50px 0 0;
}
/*stijl engelse vlag met een muis er boven*/
#english:hover {
opacity: 1;
}
#textholder {
left: 175px;
margin: 0 auto;
top: 300px;
position: relative;
}
.lang {
position: absolute;
top: 0;
left: 0;
}
/*BEGIN ANIMATIES*/
/* css animatie nederlands*/
#NLtext {
left: 50px;
-webkit-animation-name: nl;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes nl {
0% {opacity: 0;}
12,5% {opacity: 0;}
25% {opacity: 0;}
37,5% {opacity: 0;}
50% {opacity: 1;}
62,5% {opacity: 1;}
75% {opacity: 0;}
87,5% {opacity: 0;}
100% {opacity: 0;}
}
/* css animatie engels*/
#ENtext {
-webkit-animation-name: en;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes en {
0% {opacity: 1;}
12,5% {opacity: 1;}
25% {opacity: 0;}
37,5% {opacity: 0;}
50% {opacity: 0;}
62,5% {opacity: 0;}
75% {opacity: 0;}
87,5% {opacity: 0;}
100% {opacity: 1;}
}
/*css animatie nederlandse vlag*/
#dutch {
-webkit-transition: opacity 1.5s;
}
#dutch:hover {
opacity: 1;
}
/*css animatie nengelse vlag*/
#english {
-webkit-transition: opacity 1.5s;
}
#english:hover {
opacity: 1;
}
/*css fade-out animatie voor overlay*/
.overlayfade {
-webkit-animation-name: overlayfade;
-webkit-animation-duration: 2s;
}
@-webkit-keyframes overlayfade {
0% {opacity: 1;}
100%{opacity: 0;}
}
/*css fade-in animatie voor het body tag*/
body {
-webkit-animation-name: bodyfade-in;
-webkit-animation-duration: 1s;
}
@-webkit-keyframes bodyfade-in {
0% {opacity: 0;}
100%{opacity: 1;}
}
JavaScript
document.getElementById('notpage').style.visibility= 'hidden';
/* Deze function is gecomment om development makelijker te maken. Na afloop deze function weer gebruikbaar maken*/
function checkCookie()
{
var language = getCookie('language');
if (language === 'nederlands')
{
location.replace("nlhome.html");
}
else if (language === 'engels'){
location.replace("enhome.html");
}
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ')
c = c.substring(1);
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function continuescriptNL()
{
var child = document.getElementById("overlay");
child.parentNode.removeChild(child);
window.setTimeout(stillgoingNL, 500);
}
function continuescriptEN()
{
var child = document.getElementById("overlay");
child.parentNode.removeChild(child);
window.setTimeout(stillgoingEN, 500);
}
function stillgoingNL()
{
location.replace("nlhome.html");
}
function stillgoingEN()
{
location.replace("enhome.html");
}
function nl()
{
var lang = 'nederlands';
setCookie("language", lang, 30);
var OverLay = document.getElementById('overlay');
OverLay.classList.toggle('overlayfade');
window.setTimeout(continuescriptNL, 2000);
function stillgoingNL()
{
location.replace("nlhome.html");
}
}
function en()
{
var lang = 'engels';
setCookie("language", lang, 30);
var OverLay = document.getElementById('overlay');
OverLay.classList.toggle('overlayfade');
window.setTimeout(continuescriptEN, 2000);
}
最佳答案
不要在正文的onload 事件中这样做。相反，将代码内联放在页面顶部(甚至在头部部分)，以便在解析代码后立即执行。这样，您就可以尽可能快地使用 JavaScript。
更好的方法是在服务器上进行这些检查，这样您就可以立即重定向。在这种情况下，您可以在服务器上进行重定向(url 不会改变，但您会得到不同的内容)，或者通过具有正常重定向的客户端，在这种情况下，浏览器只需要处理 header 并触发一个新的请求，这仍然比通过 JavaScript 重定向更有效。此外，JavaScript 是否被执行总是一个猜测。在服务器上，您拥有更多控制权。
PS:同样对于其他代码，onload 事件可能不是最好的地方。此事件在加载完整文档(包括图像等)后触发。更好的事件是 DOMContentLoaded一旦 DOM 本身准备就绪，它就会被触发，但可能在所有图像加载之前。此事件非常适合将事件连接到元素和其他此类初始化代码。
但对于这种特定情况，您不需要 DOM。您只需要尽快重定向，所以根本不要使用任何事件。只需执行代码即可。
关于javascript - 位置替换太慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33376133/