jQuery $(window).load没有按预期工作

时间:2013-05-13 07:06:07

标签: javascript jquery ruby-on-rails

我遇到了一个今天没想到的东西,当我删除以前在我的资产管道中加载的部分函数但需要将其提取到部分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似乎工作正常?

1 个答案:

答案 0 :(得分:17)

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

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

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

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

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

deprecated相当于

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

稍后会发生,不仅会加载HTML文档,还会加载所有链接的资源,如图像和样式。有关差异的更多信息,请参阅here

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

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