Question

当我在页面加载时运行功能时，我目前无法消除网站上的延迟。有什么方法可以在页面加载之前运行功能？这是我要运行的代码：

function OnLoad()
if (Cookies.get('Theme') === 'OFF') 
{
$("body").removeClass("dark");
$(".inner-switch").text("OFF");
} else if (Cookies.get('Theme') === 'ON') {
$("body").addClass("dark");
$(".inner-switch").text("ON");
} else {
var Theme;
}
}

这就是我在页面加载时运行它的方式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Will's Site</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/navbar.css">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body onload="OnLoad()">
<!-- Nav Bar -->

<!-- Content -->


<!-- Scripts -->
<script src="js/jquery-3.4.1.js">  </script>
<script src="js/dark-mode.js"></script>
<script src="js/navbar.js"></script>
<script src="js/js.cookie.js"></script>
</body>
</html>

如果您需要更多资源，请访问以下网站的GitHub：My GitHub Link

Answer 1

最好的方法是使用像php这样的服务器端脚本

<body class="<?php if( !empty( $_COOKIE[ 'theme' ] ) && $_COOKIE[ 'theme' ] == 'ON' ) { echo "dark" } ?>">

所以代码直接呈现了正确的主题。

Answer 2

似乎您使用的是jQuery，因此可以在准备使用jQuery的ready事件操纵DOM时执行代码，这也增加了跨浏览器的战斗力。

$(document).ready(function() {
 if (Cookies.get('Theme') === 'OFF') 
 {
   $("body").removeClass("dark");
   $(".inner-switch").text("OFF");
 } else if (Cookies.get('Theme') === 'ON') {
   $("body").addClass("dark");
   $(".inner-switch").text("ON");
 } else {
   var Theme;
 }
});

还从body标签中删除onLoad并将此代码放在jQuery之后的内联或外部脚本中

消除在页面加载时运行脚本时的延迟

2 个答案: