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

Question

如果您希望事件在您的页面上运行,您应该在$(document).ready()函数内调用它.在加载DOM之后和加载 页面内容之前,其中的所有内容都将加载.

我想在加载页面内容后才能执行javascript代码我该怎么办？

Answer 1

使用load而不是ready:

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

更新 您需要使用.on()自jQuery 1.8以来.(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

Answer 2

以下

$(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.
  });
});

Answer 3

您可以通过这种方式避免在 '$' 中未定义

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

编辑：使用 'DOMContentLoaded' 比仅使用 'load' 更快，因为加载等待页面完全加载，包括 imgs...而 DomContentLoaded 只等待结构

Answer 4

编辑:此代码将等待所有内容(图像和脚本)完全加载并在浏览器中呈现.

我遇到过这个问题,$(window).on('load',function(){ ... })因为我使用的Javascript用于格式化和隐藏元素,因此对我的代码来说太快了.隐藏得太快的元素和高度为0的元素.

我现在用$(window).on('pageshow',function(){ //code here });它,它在我需要的时候开火.

Answer 5

没有人提到这个

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

这是...的简写功能

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

Answer 6

我正在寻找同样的问题,这里有什么帮助我.这是jQuery版本3.1.0,并且自jQuery版本1.8以来不推荐使用load事件.load事件从jQuery 3.0中删除.相反,您可以使用on方法并绑定JavaScript load事件:

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

Answer 7

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

Answer 8

编写你想要在其中执行的代码.文档准备好后,将执行此操作.

$(document).ready(function() { 

});