jQuery $（window）.load没有按预期工作

Question

我遇到了一个今天没想到的东西，当我删除以前在我的资产管道中加载的部分函数但需要提取到部分A / B测试时。

我正在使用bigVideo.js库在页面上加载全屏视频。 当我将代码解压缩到部分时，BigVideo.js今天开始加载错误的维度。 部分加载低于我的其他javascript资源。

我以前在我的普通资产管道中的匿名函数中填充了代码。

原始代码（工作）

$(function () {
  (function () {
  var bgVid = new $.BigVideo({useFlashForFirefox: false})
  bgVid.show('http://videourl.com', { ambient : true });
  }();
});

接下来，我尝试设置这个相等的变量，所以我可以在partial中调用它。 视频开始加载而不使用正确的尺寸。

$(function () {
  var initVid = function () {
  var bgVid = new $.BigVideo({useFlashForFirefox: false})
  bgVid.show('http://videourl.com', { ambient : true });
  };

部分：

$(function () {
  initVid();
});

它似乎正在发生dom尺寸没有完全加载，所以我尝试将函数切换到这样的东西：

部分：

$(window).load(function () {
  var bgVid = new $.BigVideo({useFlashForFirefox: false});
  bgVid.show('http://videourl.com', { ambient : true });
});

仍然没有运气。

最后，我使用了window.onload

window.onload = function () {
  var bgVid = new $.BigVideo({useFlashForFirefox: false})
  bgVid.show('http://videourl.com', { ambient : true });
};

有用？！ 那么为什么$（window）.load在这里失败了，而window.onload似乎工作正常？

Answer 1

您可以使用几种不同的事件来确保DOM已准备就绪：

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

是相同的

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

并在加载HTML文档时执行。 从另一方面你可以使用

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

被弃用的相当于

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

稍后会发生这种情况，不仅会加载HTML文档，还会加载所有链接的资源，如图像和样式。 更多关于您可以在这里阅读的差异。

对于现代浏览器，还有一个使用document.ondomcontentready的选项，它相当于jQuery添加的非标准document.ready 。

至于我，一旦我手上有像jQuery这样的工具，我宁愿不要混淆不同浏览器行为和事件支持的不兼容性。 只需使用$(function(){...}) ，不要三思而后行。