jQuery $(window).load not working as expected

Question

I ran into an something that did not expect today when removing part of a function that previously was loaded in my asset pipeline but needed to be extracted to a partial for some A/B testing.

I'm using the bigVideo.js library to load a full-screen video on the page. BigVideo.js started loading the wrong dimensions today when I extracted the code to the partial. The partial loads below the rest of my javascript assets.

I previously had the code incapsulated in a anonymous function inside my normal asset pipeline.

original code (working)

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

Next, I tried to set this equal variable so I could call it in the 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 like something was going on with the dom dimensions not fully loading, so I tried switching the function to something like this:

in partial:

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

Still no luck.

Finally, I resorted to using window.onload

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

It works?! So why is $(window).load failing here while window.onload seems to be working fine?

Have you tried `$(document).ready(function(){})` or `$(window).ready(function(){})`? — Nope, May 13 '13 at 07:08
You didn't enclose it in `()` it should be `$(window).load(function(){});` — vher2, May 13 '13 at 07:09
$(function () {}) is the same as $(document).ready(function(){}). — Paul, May 13 '13 at 07:34
Inconsistent behavior. I navigate from one page to another and back but the ready or load functions were not hit. Actualy, in chrome developer tools the page I just navigated to was not loaded but I had the previous page for debug. Unexpected. The problem solved and I assume it was a bug. — profimedica, Nov 01 '16 at 07:49

score 17 · Answer 1 · edited May 23 '17 at 12:13

There are several different events you can use in order to be sure DOM is ready:

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

is the same as

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

and is executed when HTML document is loaded. From the other hand you can use

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

which is deprecated equivalent of

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

which happens later, when not only HTML document is loaded, but also all linked resources like images and styles as well. More about the differences you can read here.

For modern browsers there is also an option to use document.ondomcontentready which is equivalent to non-standard document.ready added by jQuery.

As for me, I prefer not to mess with incompatibility of different browsers behavior and events support once I have tools like jQuery in my hand. Just use $(function(){...}) and don't think twice.

jQuery $(window).load not working as expected

1 Answers1