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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3930199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 06:41:29  来源:igfitidea点击:

How to Run a jQuery or JavaScript Before Page Start to Load

javascriptjquery

提问by Ver

I have a script that I want to run before the page start to load. The script checks the value of a variable and depending on the value redirect the user to a new page.

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

I can successfully check the variable and redirect if needed but the page still loads and display empty page but then quickly redirects to the other page. I don't want that empty page to be displayed on the page at all before the redirect.

我可以成功检查变量并在需要时重定向,但页面仍然加载并显示空页面,但随后快速重定向到另一个页面。我不希望在重定向之前在页面上显示该空白页面。

Thank you, Ver

谢谢你,Ver

回答by hawkeye126

Hide the body with css then show it after the page is loaded:

用 css 隐藏 body 然后在页面加载后显示它:

CSS:

CSS:

html { visibility:hidden; }

Javascript

Javascript

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

The page will go from blank to showing all content when the page is loaded, no flash of content, no watching images load etc.

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

回答by Trufa

Maybe you are using:

也许您正在使用:

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

Try this instead:

试试这个:

window.onload = function(){  }

回答by Gabriel

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

This will force the checking of condition and the change in url location before the page renders anything. It is worth noting that you will specifically want to do this before the call to the jQuery library so you can avoid all that library loading. Some might also argue that this would be better placed in a wrapper method and called so here is that method:

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

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

That would allow you to check multiple conditions and redirect to different locations based on it:

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

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

or if you only need it to run once and only once, but you like having nothing in the global namespace:

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

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

回答by liammclennan

Don't use $(document).ready() just put the script directly in the head section of the page. Pages are processed top to bottom so things at the top are processed first.

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

回答by Blackcoat

If you don't want anything to display before the redirect, then you will need to use some server sidescripting to accomplish the task before the page is served. The page has already begun loading by the time your Javascript is executed on the client side.

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

If Javascript is your only option, your best best is to make your script the first .js file included in the <head>of your document.

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

Instead of Javascript, I recommend setting up your redirect logic in your Apache or nginx server configuration.

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

回答by Leandro

This should do the trick:

这应该可以解决问题:

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

Good luck  ;)

祝你好运 ;)

回答by Victor Jatobá

Try the unload event. The unload event is sent to the window element when the user navigates away from the page.

尝试卸载事件。当用户离开页面时, unload 事件被发送到 window 元素。

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