JQuery $(window).load не работает должным образом

Я столкнулся с тем, чего не ожидали сегодня, когда вы удаляете часть функции, которая ранее была загружена в мой конвейер активов, но для частичного тестирования A/B нужно было извлечь частичную часть.

Я использую библиотеку bigVideo.js для загрузки полноэкранного видео на странице. BigVideo.js начал загружать неправильные измерения сегодня, когда я извлек код для частичного. Частичные нагрузки ниже остальных моих ресурсов javascript.

Ранее у меня был код, инкапсулированный анонимной функцией внутри моего нормального конвейера.

исходный код (рабочий)

$(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 работает нормально?

Ответ 1

Существует несколько различных событий, которые можно использовать для обеспечения готовности DOM:

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

совпадает с

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

и выполняется при загрузке документа HTML. С другой стороны, вы можете использовать

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

который устарел эквивалент

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

который происходит позже, когда загружается не только документ HTML, но и все связанные ресурсы, такие как изображения и стили. Подробнее о различиях, которые вы можете прочитать здесь.

Для современных браузеров существует также возможность использовать document.ondomcontentready, который эквивалентен нестандартным document.ready, добавленным jQuery.

Что касается меня, я предпочитаю не вмешиваться в несовместимость различных действий браузеров и событий, когда у меня есть инструменты, такие как jQuery в моей руке. Просто используйте $(function(){...}) и не думайте дважды.