jQuery $(window).load 没有按预期工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16516494/
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
jQuery $(window).load not working as expected
提问by Paul
I ran into an something that did not expect today when removing part of a function that previously was loaded in my asset pipeline but needed to be extracted to a partial for some A/B testing.
我在删除之前加载到我的资产管道中但需要提取到部分以进行某些 A/B 测试的部分功能时遇到了今天意想不到的事情。
I'm using the bigVideo.js library to load a full-screen video on the page. BigVideo.js started loading the wrong dimensions today when I extracted the code to the partial. The partial loads below the rest of my javascript assets.
我正在使用 bigVideo.js 库在页面上加载全屏视频。当我将代码提取到部分时，BigVideo.js 今天开始加载错误的维度。部分加载低于我的 javascript 资产的其余部分。
I previously had the code incapsulated in a anonymous function inside my normal asset pipeline.
我以前将代码封装在我的普通资产管道中的匿名函数中。
original code (working)
原始代码（工作）
$(function () {
(function () {
var bgVid = new $.BigVideo({useFlashForFirefox: false})
bgVid.show('http://videourl.com', { ambient : true });
}();
});
Next, I tried to set this equal variable so I could call it in the partial. Video started loading without using correct dimensions.
接下来，我尝试设置这个相等的变量，以便我可以在部分中调用它。视频在未使用正确尺寸的情况下开始加载。
$(function () {
var initVid = function () {
var bgVid = new $.BigVideo({useFlashForFirefox: false})
bgVid.show('http://videourl.com', { ambient : true });
};
in partial:
部分：
$(function () {
initVid();
});
It looked like something was going on with the dom dimensions not fully loading, so I tried switching the function to something like this:
看起来 dom 维度没有完全加载，所以我尝试将函数切换为这样的：
in partial:
部分：
$(window).load(function () {
var bgVid = new $.BigVideo({useFlashForFirefox: false});
bgVid.show('http://videourl.com', { ambient : true });
});
Still no luck.
仍然没有运气。
Finally, I resorted to using window.onload
最后，我求助于使用 window.onload
window.onload = function () {
var bgVid = new $.BigVideo({useFlashForFirefox: false})
bgVid.show('http://videourl.com', { ambient : true });
};
It works?! So why is $(window).load failing here while window.onload seems to be working fine?
有用？！那么为什么 $(window).load 在这里失败而 window.onload 似乎工作正常？
回答by Vadim
There are several different events you can use in order to be sure DOM is ready:
您可以使用多种不同的事件来确保 DOM 已准备就绪：
$(function(){ ... });
is the same as
是相同的
$(document).ready(function(){ ... });
and is executed when HTML document is loaded. From the other hand you can use
并在加载 HTML 文档时执行。另一方面，您可以使用
$(window).load(function() { ... });
which is deprecatedequivalent of
已弃用，相当于
$(window).on('load', function() { ... });
which happens later, when not only HTML document is loaded, but also all linked resources like images and styles as well. More about the differences you can read here.
稍后会发生这种情况，当不仅加载 HTML 文档，而且加载所有链接的资源（如图像和样式）时。您可以在此处阅读有关差异的更多信息。
For modern browsers there is also an option to use document.ondomcontentreadywhich is equivalent to non-standard document.readyadded by jQuery.
对于现代浏览器，还有一个选项可以使用document.ondomcontentready，相当于document.ready由jQuery.
As for me, I prefer not to mess with incompatibility of different browsers behavior and events support once I have tools like jQueryin my hand. Just use $(function(){...})and don't think twice.
至于我，一旦jQuery我手头有这样的工具，我就不想弄乱不同浏览器行为和事件支持的不兼容性。只需使用$(function(){...})，不要三思而后行。
