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

Question

当我在页面加载时运行 function 时，我目前无法从我的网站上消除延迟。 有没有办法在页面加载之前运行 function ？ 这是我试图运行的代码：

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：我的 GitHub 链接

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 之后的内联或外部脚本中