javascript - jQuery $(window).load not working as expected -

i ran did not expect today when removing part of function loaded in asset pipeline needed extracted partial a/b testing.

i'm using bigvideo.js library load full-screen video on page. bigvideo.js started loading wrong dimensions today when extracted code partial. partial loads below rest of javascript assets.

i had code incapsulated in anonymous function inside normal asset pipeline.

original code (working)

$(function () {   (function () {   var bgvid = new $.bigvideo({useflashforfirefox: false})   bgvid.show('http://videourl.com', { ambient : true });   }(); }); 

next, tried set equal variable call in 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 going on dom dimensions not loading, tried switching function this:

in partial:

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

still no luck.

finally, resorted using window.onload

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

it works?! why $(window).load failing here while window.onload seems working fine?

there several different events can use in order sure dom ready:

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

is same as

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

and executed when html document loaded. other hand can use

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

which deprecated equivalent of

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

which happens later, when not html document loaded, linked resources images , styles well. more differences can read here.

for modern browsers there option use document.ondomcontentready equivalent non-standard document.ready added jquery.

as me, prefer not mess incompatibility of different browsers behavior , events support once have tools jquery in hand. use $(function(){...}) , don't think twice.