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

【问题标题】：How to do jquery code AFTER page loading?页面加载后如何执行jquery代码？
【发布时间】：2010-05-28 01:59:22
【问题描述】：

如果您希望某个活动在您的页面，你应该在里面调用它 $(document).ready() 函数。它里面的所有东西都会尽快加载在加载 DOM 和之前页面内容已加载。

我只想在页面内容加载后才做javascript代码，我该怎么做？

【问题讨论】：

标签： jquery

【解决方案1】：

使用load 代替ready：

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

更新从 jQuery 1.8 开始，您需要使用 .on()。 (http://api.jquery.com/on/)

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

来自this answer：

根据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

【讨论】：

来自对此答案的评论：stackoverflow.com/a/37817516/957246 $(window).on("load", function() { // code here }); ..因为“.load”已被弃用。
使用 .on() 很明显.. 但我花了 1 小时把头撞在墙上才找到这个.. 谢谢..！
小心尝试$(document).on('load', ...的错误，它必须是$(window).on('load',...

【解决方案2】：

没有人提到这个

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

这是一个简写函数

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

【讨论】：

【解决方案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.
  });
});

【讨论】：

就绪处理程序中的负载处理程序？太疯狂了。您不需要准备好文档，因为此时确实存在窗口，并且您可以在没有它的情况下附加处理程序。
就绪处理程序中的负载处理程序在 jQuery 3.0 中不起作用。见stackoverflow.com/a/48718000/4564945
这是一个非常古老的答案。检查 jquery 3.0 的替代功能

【解决方案4】：

编辑：此代码将等待所有内容（图像和脚本）完全加载并在浏览器中呈现。

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

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

【讨论】：

这个对我也有帮助，我很想在显示 jQuery Mobile 页面后运行一些代码。谢谢你。 @Boyd Cyr
只是想补充一下，与接受的答案相比，此代码有多大帮助。非常感谢。

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

在里面写下你想要执行的代码。当您的文档准备好时，这将被执行。

$(document).ready(function() { 

});

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

我正在寻找同样的问题，这对我有帮助。这是 jQuery 版本 3.1.0，load 事件自 jQuery 版本 1.8 起已弃用。 load 事件从 jQuery 3.0 中移除。相反，您可以使用 on 方法并绑定 JavaScript 加载事件：

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

【讨论】：