我遇到一个没有想到的东西,当你删除以前加载到我的资产管道中的一部分功能,但需要被提取到部分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(){…}),不要三思而后行.
