如何在页面开始加载之前运行 jQuery 或 JavaScript答案

【问题标题】：How to Run a jQuery or JavaScript Before Page Start to Load如何在页面开始加载之前运行 jQuery 或 JavaScript
【发布时间】：2010-10-14 04:59:12
【问题描述】：

我有一个要在页面开始加载之前运行的脚本。该脚本检查变量的值并根据该值将用户重定向到新页面。

我可以成功检查变量并在需要时重定向，但页面仍会加载并显示空白页面，但随后会快速重定向到其他页面。在重定向之前，我根本不希望那个空页面显示在页面上。

谢谢你，版本

【问题讨论】：

【解决方案1】：

用css隐藏body，页面加载后显示：

CSS：

html { visibility:hidden; }

Javascript

$(document).ready(function() {
  document.getElementsByTagName("html")[0].style.visibility = "visible";
});

当页面加载时，页面将从空白变为显示所有内容，没有内容闪烁，没有观看图像加载等。

【讨论】：

【解决方案2】：

<head>
  <script>
    if(condition){
      window.location = "http://yournewlocation.com";
    }
  </script>
</head>
<body>
  ...
</body>

这将在页面呈现任何内容之前强制检查条件和更改 url 位置。值得注意的是，您将特别希望在调用 jQuery 库之前执行此操作，这样您就可以避免所有库加载。有些人可能还争辩说，这会更好地放在包装器方法中并调用，所以这里是那个方法：

function redirectHandler(condition, url){
  if(condition){
    window.location = url;
  }else{
    return false;
  }
}

这将允许您检查多个条件并根据它重定向到不同的位置：

if(redirectHandler(nologgedin, "/login.php")||redirectHandler(adminuser, "/admin.php"));

或者如果您只需要它运行一次且只运行一次，但您喜欢在全局命名空间中没有任何内容：

(function(condition, url){
  if(condition)window.location=url;
})(!loggedin, "/login.asp");

【讨论】：

【解决方案3】：

也许你正在使用：

$(document).ready(function(){
   // Your code here
 });

试试这个：

window.onload = function(){  }

【讨论】：

是的，我正在使用 $(document).ready(function(){ // 你的代码在这里 });仅此功能。有没有可能在javascript中做到这一点
$(document).ready() 中的代码在您的页面被读取之后运行，但在其他资产（例如图像）完成下载之前运行。在运行 $(document).ready() 中的脚本之前，您将在屏幕上看到一些内容。

【解决方案4】：

不要使用 $(document).ready() 只需将脚本直接放在页面的 head 部分。页面从上到下处理，因此首先处理顶部的内容。

【讨论】：

【解决方案5】：

如果您不希望在重定向之前显示任何内容，那么您将需要使用一些服务器端脚本在页面被提供之前完成任务。当您的 Javascript 在客户端上执行时，该页面已经开始加载。

如果 Javascript 是您唯一的选择，最好的办法是让您的脚本成为文档的 <head> 中包含的第一个 .js 文件。

我建议您在 Apache 或 nginx 服务器配置中设置重定向逻辑，而不是 Javascript。

【讨论】：

【解决方案6】：

这应该可以解决问题：

window.onload = function(event) {
    event.stopPropagation(true);
    window.location.href="http://www.google.com";
};

祝你好运；）

【讨论】：

【解决方案7】：

尝试卸载事件。当用户离开页面时，会向窗口元素发送 unload 事件。

$( window ).unload(function() {
    //do something
});

【讨论】：