页面完全加载后才运行 JavaScript

Baylor Rae'

# 2009年9月3日

这应该放在 jQuery 中

Chris Coyier

评论的永久链接# 2009年9月3日

已移动。

Rory McCrossan

# 2009年9月9日

它的简写版本是

$(function() { // 代码在此处 }

Chris Coyier

评论的永久链接# 2009年9月9日

两者之间存在根本区别。它是指 DOM 准备好时，通常是理想的情况。而这是指整个页面完全加载完毕时，两者不同。例如，这将等待图像加载完毕，以便你可以准确地测量它们的宽度和高度，而你的代码片段不会等待。差异很小，但有时至关重要。
测试

评论的永久链接# 2011年3月14日

$(function() {
// 代码在此处
}
Makaze

评论的永久链接# 2012年4月30日
你的语法也不正确。它应该是
```
$(function() {
// code here
});
```
确保关闭方括号并在末尾加上分号。
Patrick

评论的永久链接# 2013年9月17日

感谢 @Makaze！
Aldi Unanto

评论的永久链接# 2013年11月13日

两者之间存在区别
$(function() { // 代码在此处 } 和 $(window).bind("load", function() { // 代码在此处 });。**$(window).bind(‘load’, function(){})** 将在页面加载完毕后运行。
sreejith

评论的永久链接# 2015年9月21日

这个不起作用……可能很短，但不起作用
jD

评论的永久链接# 2016年9月28日

我需要这个的演示链接

Rodrigo

# 2010年1月15日

这可能是我在你网站上的第一个评论，我是一名粉丝，阅读了很长时间，可能从播客 20 XD 开始就一直在阅读。

我一直无法弄清楚应该将这段代码放在哪里？

如果你能帮我，请用你的“简单的 jQuery 手风琴”给我举个例子 - https://css-tricks.org.cn/snippets/jquery/simple-jquery-accordion/

谢谢，Chris！

Mike Smith

评论的永久链接# 2010年1月27日

将代码放在你的 <head>HERE</head> 部分中。
Artur Ejsmont

评论的永久链接# 2010年7月13日

这取决于你拥有多少代码以及你是否会重复使用。如果你想重复使用，请将函数放在 JS 文件中，并引用一个生活在其中的变量

然后，你可以在每个页面上放入任何你想要的 ID，如果该 ID 的项目存在，它将被处理。

因此，在 JS 文件中，你不会对东西进行硬编码，只需检查变量是否存在以及它的值是什么。

对于这个例子，我认为这有点过分

:- )

ChromA

# 2010年9月8日

有没有办法在没有 jQuery 的情况下做到这一点？我使用 jQuery（但脚本将在页面末尾加载）。我正在寻找一个可以在内容（将在页面加载后执行）中使用的 JS 代码片段。

mathew

# 2010年10月1日

一个小问题。当使用“复制到剪贴板”按钮时，它会用花括号“'”复制，而不是直接用“”。带有花括号的代码不起作用……

谢谢

jon

# 2011年3月7日

// 只是另一种写相同内容的方法。

$(window).load(function() {
// 所有内容加载完毕后的代码在此处…
});

Dinesh

评论的永久链接# 2014年5月6日

谢谢，伙计。这对我来说完美地运行。
Rajat

评论的永久链接# 2014年11月20日

太棒了，伙计……正是我想要的！

Ahxan Khan

# 2011年7月10日

如何将它添加到博客模板？

bekir

# 2011年11月1日

我试图在加载地图（我使用的是 map extreme）之前加载页面，尽管我使用了 document ready 函数，但页面试图用页面对象加载 mapLabels。在一段时间内，用户会看到我的页面，因为没有 CSS。地图完成工作后，CSS 加载完成。我该如何解决这个问题？我使用了你的代码，但对我来说不起作用。

以下是一个示例；

j(window).bind(“load”, function () {
MapXtremeJavascriptLib.init();
});

/* DOCUMENT READY FUNCTION AREA START */
j(document).ready(function () {

j(“.accordion”).accordion({
autoHeight: true,
navigation: true,
collapsible: true
});
/* DOCUMENT READY FUNCTION AREA END*/

任何图形

# 2011年11月2日

天才！非常感谢 :-)

Andy

# 2011年11月21日

大家好,
我一直在为如何 A：告诉一个 JavaScript 等待整个网站加载完毕而苦恼。我想我刚找到了解决方案。以及 B：让 JavaScript 仅在主页上加载。

该网站运行在 Joomla 上，之前我从一个自定义 HTML 模块运行脚本，我已将其分配到调试位置并设置为仅在主页上加载。

这对于 Firefox、Chrome 和 Safari 来说效果很好，但 IE 却出现了问题（像往常一样）。

现在我一直在苦恼如何添加它，以便脚本（一个女士走进网站并欢迎访问者）只会显示在主页上。

感谢您的任何建议！

提前感谢,
Andy

aditia

# 2011年12月19日

谢谢，Chris，在知道这一点之前，我使用了 setTimeout，而使用它的缺点是我们永远无法准确地知道页面在用户浏览器上的加载时间

mark

# 2012年1月27日

真可惜，它在 IE9 中不起作用 :-(

Ben Riordan

评论的永久链接# 2012年5月26日

$(window).load(function()

应该在 IE9 上正常工作。至少对我来说是。但在 IE8 及更低版本上不起作用。

然而，它在 Firefox 的当前版本上不起作用。显然，Firefox 将 .load 和 .ready 视为相同，并在 JavaScript 加载完毕后加载 .load，并且不会像其他浏览器那样等待所有图像和其他页面内容。有没有人知道解决 Firefox 的方法？

谢谢

~ Ben
ingvi Jónasson

评论的永久链接# 2014年4月17日

@mark
你是否在之前加载了 jQuery？

Dan Voyce

# 2012年3月20日

你每天平均为我回答一个问题。非常感谢！

RITURAJ

# 2012年4月6日

正在运行……

Cody Sielawa

# 2012年5月31日

这正是我需要的，感谢你提供的这个很棒的资源！

ian.pvd

# 2012年6月26日

天啊。这简直救了我的命。

……是的，我可能有点夸张，但不是很多。

James Hambly

# 2012年7月16日

在花费了大约四个小时试图让一些外部来源的代码与 jQuery cycle 循环之后，这段代码片段解决了所有问题。

谢谢！

dean

评论的永久链接# 2023年1月28日

这段代码有效地防止了粘性“网站顶部”导航在页面仍在加载 CSS/JS/图像时滚动时出现故障

$(window).load(function() {
});
非常感谢！

Domina X

# 2012年7月25日

太棒了……又是 jQuery。看到 Google 上的标题，我以为你会介绍一些非框架的东西。哎，为什么人们忽视了为一些可以用几行代码完成的事情加载 32KB 的 jQuery 库并不酷的事实呢？

无论如何，还是要感谢你……即使这对我一点帮助都没有。

jamie paterson

评论永久链接# 2012 年 9 月 5 日

你和你的用户可能在他们的系统中缓存了 jQuery，所以我猜这不是问题——另外，如果你使用 Google 作为 CDN，它会非常快——所以为什么不呢？

Romans

# 2012 年 7 月 26 日

这是关于 web 开发最棒的网站！

Rajiv Varma N

# 2012 年 8 月 16 日

我想在页面加载后加载我的压缩 JS 文件。
目前加载这个 JS 文件需要 1.8 秒到 2.5 秒，这会使我的整个网页加载时间增加到 4.2 秒到 5.1 秒。

那么如何加载这个 JS 文件而不延迟页面加载呢？

Doug T

# 2012 年 9 月 10 日

一如既往，在谷歌上搜索，Css-Tricks 的第一个结果就是当天最棒的！感谢你为 web 开发社区投入的时间，Chris。

Jubal

# 2012 年 10 月 31 日

$(window).on(‘load’, function(){
// 太棒了
})

Alexandru Nastase

# 2012 年 11 月 4 日

这段代码让我的一天都变得美好，Chris，非常感谢，我在你的网站上找到了越来越多有用的东西，用于我的前端开发，谢谢！！

Thomas Kroell

# 2012 年 11 月 27 日

谢谢！我一直努力让 Jquery 在加载大量图像后加载，而这完美地解决了这个问题！

David

# 2012 年 11 月 30 日

正如 Jubal 指出的那样，.bind 已被弃用，取而代之的是 .on。

Riya

# 2013 年 5 月 27 日

$(window).bind(“load”, function(){
});
上面的函数在初始加载时工作正常。但是当我们导航到不同的页面并返回到同一个页面时，该函数会在 DOM 元素完全加载之前执行。请告诉我是否有其他方法。

Sandeep

评论永久链接# 2014 年 6 月 22 日

你使用的是 jquerymobile 吗？检查你的按钮/链接的响应是否被添加到同一个 DOM 中。使用 Firefox 或 firebug 来确定这一点。如果是，那么这是因为在 jquerymobile 中，模式是默认的 ajax。你需要在你的链接中使用‘rel=”external”’才能使其正常工作，或者重写代码以使其在框架中正常工作。

Shawn

# 2013 年 6 月 28 日

优秀的帖子！我试图在我的应用程序中使用 DOM 准备好的方法而不是 html 布局，并且立即注意到为什么我无法插入 html。:) 谢谢！

Visvanathan

# 2013 年 7 月 2 日

如何只在网页中运行一次 window.load 事件？

Tony

# 2013 年 7 月 3 日

这在 Firefox 中根本不起作用 :(

我以为是我疯了，但它确实不起作用……

$(window).bind(“load”, function() {
alert(‘test’);
});

在 Chrome 中尝试这段代码片段，它会弹出“test”……在 Firefox 中，什么都没有。我使用的是最新版本的 Firefox (v 22)。

有人知道一种跨浏览器的方法吗？

zMin

# 2013 年 7 月 24 日

有没有办法在加载远程脚本时实现它？
例如
谢谢。

bonaca

# 2013 年 9 月 7 日

我必须重复 Riya 的问题。

$(window).bind(“load”, function(){
});
上面的函数在初始加载时工作正常。但是当我们导航到不同的页面并返回到同一个页面时，该函数会在 DOM 元素完全加载之前执行。请告诉我是否有其他方法？

Jon Barratt

评论永久链接# 2014 年 7 月 12 日

你找到这个问题的答案了吗，bonaca？我正在努力解决同样的问题。

Sathish

# 2013 年 9 月 20 日

不错的帖子。bind 和 live 之间有什么区别？

Aaron Loften

# 2013 年 10 月 1 日

谢谢。你总是给出很棒的网页设计建议。似乎其他所有人都说使用 .live()，而据我所知，它已经被弃用。即使不是，这也很棒！谢谢！

Rick

# 2013 年 10 月 8 日

这段代码在 Woontrendz 上完成了工作，以防止粘性“网站顶部”导航在页面仍在加载 CSS/JS/图像时滚动时出现故障。

$(window).load(function() {
});

非常感谢！

Ganeshkumar.S

# 2013 年 10 月 14 日

如何在页面加载后在 jQuery 中调用点击事件？

Ganeshkumar.S

# 2013 年 10 月 14 日

我需要在页面加载后执行此函数。

    $("#video_publish_status").click(function(){
          alert(location.href);
      });

请帮帮我……

vikash

# 2013 年 10 月 22 日

它真的有效！！它解决了我的问题。

Gurunathan

# 2013 年 10 月 22 日

$(window).bind(“load”, function() {

});

这段代码在 IE9 中不能正常工作，在页面加载之前，这个函数会触发……

是否有任何方法为 IE 提供 WINDOWS.Load 函数的支持？

Alex

# 2013 年 12 月 2 日

if (document.readyState === “complete”) { init(); }
/*
ninitialized – 尚未开始加载
loading – 正在加载
interactive – 已加载足够，用户可以与其交互
complete – 完全加载
*/

thecristen

# 2013 年 12 月 3 日

这对我帮助很大！谢谢！

javier

# 2013 年 12 月 22 日

你太棒了!!!!! 非常感谢！
这完美地解决了问题。

Scott

# 2014 年 1 月 16 日

参考 Chris 的建议：$(window).bind(“load”, function() {

这是一个很棒的函数，它会在页面上所有 JavaScript 和 AJAX/JSON 加载完成后加载。它在 IE9 中也运行良好。

我开发前端 SharePoint 解决方案，Chris 的建议是唯一一个对我在整个页面加载后加载有效的解决方案。

非常感谢！

Robby

# 2014 年 2 月 10 日

有趣，谢谢，但是如何让嵌入的 YouTube 视频等待页面上的脚本加载完毕呢？
目前，如果性急的用户点击图像并启动 Lightbox，它不会显示放大的图像，而是将其显示为一个单独的页面；这在视频加载后不会发生，所以很明显是视频加载阻止了 Lightbox 脚本加载。
???

Shawn

# 2014 年 2 月 13 日

我正在查找这个问题，并找到了一个据说是 Google 推荐的跨浏览器方法，它做的是同样的事情。

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

来源：Feedthebot

Jamil

# 2014 年 2 月 13 日

太棒了，哥们。我欠你一杯啤酒。

Stéphan Champagne

# 2014 年 3 月 11 日

非常感谢你，
我一直在为列高度而烦恼，因为图像在 jquery.ready 运行之前没有加载。只有在刷新时，才会在 Chrome 中出现这种情况。但很难找到原因。
当我添加一个警报时，我可以看到图像在警报触发时没有加载。所以我搜索原因，这个“很小但有时至关重要的区别”使它起作用了。
谢谢

Garrett

# 2014 年 3 月 31 日

非 jQuery

<head>

function func() {
    alert("hello world");
}

</head>


<body onload="javascript:Func()"></body>

Efe Buyuran

评论永久链接# 2016 年 9 月 19 日

效果很好，谢谢！

Ted

# 2014 年 6 月 17 日

这对我帮助很大。

我有一个报表查看器控件，它无法从 window.onload 打印。
这解决了问题。

再次感谢

shamim

# 2014年6月28日

它对我有帮助。谢谢。

乔治·约翰

# 2014年7月17日

我尝试了上面的代码，它看起来还不错。我有一个关于异步 JS 的疑问。 Onload 事件会在加载所有异步 js 文件后触发，还是在 HTML 渲染后触发？

另外，有没有办法优先考虑异步调用？

金

# 2014年8月31日

感谢分享知识！代码和解释帮助很大！

贾米尔·艾哈迈德

# 2014年10月11日

太棒了，非常实用的技巧。我之前在页面末尾尝试了一些 jQuery 代码，但它不起作用。然后我发现了这个技巧，哈！它完美地工作了。现在我可以加载我的代码，在整个页面加载完成后。感谢 Chris 的分享

布米

# 2015年2月13日

感谢你的代码，但我只想在页面加载时提交表单一次，但它一直在循环。有什么解决办法吗？

$(window).bind(“load”, function() {
// 代码在此处
$(“#id” ).submit();
});

扎赫拉

# 2015年2月22日

我如何在加载另一个页面后运行 jQuery 代码？

厚脸皮的鲍勃

# 2015年4月16日

这甚至在 SharePoint 环境中也能工作！太棒了

马尔

# 2015年6月9日

非常感谢，我真的需要了解如何在具有相互依赖的动态 div 高度的网站上实现这个功能。天才。

巴文

# 2015年8月6日

不包含 jQuery，使用纯 JavaScript

window.onload = function () { alert(“它已加载！”) }

凯利

评论永久链接# 2018年11月4日

谢谢！

萨兹

# 2015年9月11日

非常感谢你 :)

杰伊·萨克斯

# 2015年10月28日

根据我今天阅读的内容，我相信现在 jQuery 的方法是

$(window).on("load", ...)

而不是 .bind() 甚至 .load()。

如果有人知道，在相关方面，我很乐意听到关于这是否等待即使 iframe 加载完成的权威信息。

看起来 $(window).on(“load”…) 不会等待 iframe 加载，但我可能遗漏了什么。

杰伊

擎天柱

# 2015年10月30日

不错，我一直想知道它们的用途。当页面加载时，我们可以做很多必要的事情

哈里·普霍尔斯

# 2015年12月3日

原生 JavaScript 版本

window.onload = function(){
    // code here
};

瓦特

# 2015年12月19日

仅在您已经使用 jQuery 的情况下才有用。
但是，我不明白为什么为了指示浏览器延迟其他脚本，要给页面增加另一个 .js（即 jQuery）。

本·卡瓦拉罗

# 2016年1月12日

谢谢。我在页面加载时运行一个脚本时遇到麻烦，该脚本需要整个页面加载，包括数据的绑定和更改 DOM 上的脚本的应用，这些脚本在 .ready 事件中更改 DOM。一旦我将代码从 .ready 中移到这个代码中，它就起作用了。

罗希达斯

# 2016年7月21日

嗨,

我必须通过选择使用 AJAX 渲染的元素来滚动到顶部。我该怎么做。

我尝试了所有技巧，比如 settimeout、document.ready、ajax complete、ajax done，但都没有成功。请帮忙。

乔·奥德特

# 2016年11月23日

非常感谢 - 这对我很有效。我在从另一个中央 HTML 文件加载代码，然后更新它时遇到了麻烦。在这种情况下，我想更改 bootstrap 导航栏上的 active 类。

帕拉什·萨钱

# 2017年3月2日

如何在 $(windows).load 中自动点击按钮，当页面加载时

拉杰尼什·库马尔

# 2017年6月9日

它完美地工作了，但当我第二次重新加载时，内部的代码没有执行，有什么原因吗？

达兹

# 2018年3月22日

很棒的小技巧。谢谢

卡比尔·萨卡尔

# 2018年6月20日

试试这个

$(document).ready(function(){
//酷东西
});

比杰伊·库马尔

# 2018年7月23日

它也对我有用。感谢提供如此宝贵的技巧。我之前尝试使用以下代码，但它不起作用

$(document).ready(function(){
//代码在这里
});

肯定有区别...

默里·查普曼

# 2019年3月2日

我认为问题是询问如何运行 JavaScript，而不是 jQuery...是的，jQuery 是一个 JavaScript 库，但我希望能够在 grease monkey 中运行一个脚本，它不使用 jQuery。请提供一个纯粹的 JavaScript 答案，谢谢。

默里·查普曼

评论永久链接# 2019年3月2日

啊，我找到了。感谢回答这个问题的那个人。 :)

奈亚姆

# 2021年1月8日

我在 document.ready 中使用 jQuery 放置了一个加载器，但在 Chrome 中没有显示，在 Firefox 中效果很好。解决方案是什么？

阿图尔·巴勒拉奥

# 2021年4月22日

这适用于 Magento 2 吗？因为在 Magento 2 的购物车页面中，页面加载后表单加载，我无法在表单上运行脚本，而且我不想使用 settimeout 函数。

评论

发表评论 取消回复

发表评论取消回复