javascript – jQuery $(window).load不能按预期工作

我遇到一个没有想到的东西,当你删除以前加载到我的资产管道中的一部分功能,但需要被提取到部分A / B测试.

我正在使用bigVideo.js库在页面上加载全屏视频.当我将代码提取到部分时,BigVideo.js开始加载错误的维度.部分加载到我的其余的资源下面.

我以前在我的普通资产管道中的匿名函数中封装了代码.

原代码(工作)

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

接下来,我试图设置这个相等的变量,所以我可以在部分中调用它.视频开始加载而不使用正确的尺寸.

$(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似乎工作正常？

解决方法

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

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

是相同的

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

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

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

这是deprecated等于

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

这不仅发生在不仅HTML文档被加载,而且所有链接的资源,如图像和样式.更多关于你可以阅读的差异here.

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

对于我来说,一旦我手中有jQuery这样的工具,我宁可不要混淆不同浏览器行为和事件的不兼容性.只需使用$(function(){…}),不要三思而后行.

原文地址：https://www.jb51.cc/jquery/152900.html