如何在页面加载后执行jquery代码？

Question

如果您想让事件在页面上正常工作，您应该将它放在$(document).ready()函数内部调用。在此函数中的所有内容都会在DOM加载完成之前和页面内容加载完成之后立即加载。

我希望在页面内容加载完成之后才执行JavaScript代码，我该如何做？

- Alex

Answer 1

使用 load 替代 ready:

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

更新 自jQuery 1.8版本以后，需要使用.on()方法。（http://api.jquery.com/on/）

$(window).on('load', function() {
 // code here
});

从这个答案来看：

根据http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/：

移除了已弃用的事件别名

.load、.unload 和 .error 自 jQuery 1.8 版本以来已被弃用。使用 .on() 来注册监听器。

https://github.com/jquery/jquery/issues/2286

- Matt

---

从这个答案的评论中可以看出：https://dev59.com/6Onys4cB2Jgan1zn6kN6#37817516$(window).on("load", function() { // 在这里编写代码 });因为“.load”已被弃用。 - trapper_hag

使用 .on() 很明显... 但是在找到它之前，我花了一个小时撞墙.. 谢谢..！ - ghuroo

注意不要犯错，尝试使用 $(document).on('load', ... 是错误的，正确的应该是 $(window).on('load',...。 - User

Answer 2

没有人提到过这个。

$(function() {
    // place your code
});

它是一个函数的速记形式

$(document).ready(function() { .. });

- Zoltán Süle

Answer 3

以下

$(document).ready(function() { 
});

可以被替换

$(window).bind("load", function() { 
     // insert your code here 
});

我使用的另一种增加页面加载时间的方法是：

$(document).ready(function() { 
  $(window).load(function() { 
     //insert all your ajax callback code here. 
     //Which will run only after page is fully loaded in background.
  });
});

- Kshitiz

---

在 ready handler 中使用 load handler？那是疯狂的。你不需要 document ready，因为此时 window 已经存在，可以在没有它的情况下附加一个 handler。 - dalore

jQuery 3.0 版本中，准备好的处理程序内部的加载处理程序不起作用。请参见 https://dev59.com/U2445IYBdhLWcg3wKHEJ#48718000。 - Necreaux

这是一个非常老的答案。请检查 jQuery 3.0 的替代函数。 - Kshitiz

Answer 4

你可以通过这种方式避免在"$"中出现未定义

window.addEventListener("DOMContentLoaded", function(){
    // Your code
});

编辑：使用“DOMContentLoaded”比仅使用“load”更快，因为“load”会等待页面完全加载，包括图片...而“DOMContentLoaded”只等待结构。

- Diego Vinícius

Answer 5

编辑：这段代码将等待所有内容（图像和脚本）在浏览器中完全加载和渲染。

我曾经遇到过这样的问题：$(window).on('load',function(){ ... }) 对我的代码来说太快了，因为我使用的Javascript是用于格式化和隐藏元素的。元素被隐藏得太快，留下的高度为0。

现在我使用$(window).on('pageshow',function(){ //code here });它会在我需要的时候触发。

- Boyd Cyr

---

这个也帮了我，我确切地想在jQuery Mobile页面显示后运行一些代码。谢谢。@Boyd Cyr - codedudey

只是想补充一下，相比于被接受的答案，这段代码更加有帮助。非常感谢。 - Countzero

Answer 6

我正在寻找相同的问题，以下是帮助我解决问题的方法。这里有jQuery版本3.1.0，自jQuery版本1.8以来，load事件已被弃用。在jQuery 3.0中，已删除load事件。相反，您可以使用on方法并绑定JavaScript加载事件：

$(window).on('load', function () {
  alert("Window Loaded");
});

- ankit suthar

Answer 7

在这里编写您想要执行的代码。当您的文档准备就绪时，它将被执行。

$(document).ready(function() { 

});

- Marc-André Denault

Answer 8

如果您想在第一个函数完成后运行第二个函数，请参阅此 stackoverflow 答案。

- Guasqueño