jQuery $ (window) .load no funciona como se esperaba

Me encontré con algo que no esperaba hoy al eliminar parte de una function que anteriormente estaba cargada en mi canalización de activos pero que necesitaba ser extraída a un parcial para algunas testings A / B.

Estoy usando la biblioteca bigVideo.js para cargar un video de pantalla completa en la página. BigVideo.js comenzó a cargar las dimensiones incorrectas hoy cuando extraje el código en el parcial. Las cargas parciales debajo del rest de mis activos de JavaScript.

Anteriormente tuve el código encapsulado en una function anónima dentro de mi canal de activos normal.

código original (en funcionamiento)

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

Luego, traté de establecer esta variable igual para poder llamarla en parcial. El video comenzó a cargarse sin usar las dimensiones correctas.

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

en parcial:

 $(function () { initVid(); }); 

Parecía que algo estaba sucediendo con las dimensiones dom no completamente cargadas, así que traté de cambiar la function a algo como esto:

en parcial:

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

Todavía sin suerte.

Finalmente, recurrí al uso de window.onload

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

¡¿Funciona?! Entonces, ¿por qué $ (window) .load falla aquí mientras window.onload parece estar funcionando bien?

Hay varios events diferentes que puede usar para asegurarse de que DOM esté listo:

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

es lo mismo que

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

y se ejecuta cuando se carga el documento HTML. Por otro lado, puedes usar

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

que está en desuso equivalente de

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

lo que sucede más tarde, cuando no solo se carga el documento HTML, sino también todos los resources vinculados, como imágenes y styles. Más sobre las diferencias que puedes leer aquí .

Para los browseres modernos también hay una opción para usar document.ondomcontentready que es equivalente a un document.ready no estándar. jQuery agregado jQuery .

En cuanto a mí, prefiero no meterme con la incompatibilidad del comportamiento de diferentes browseres y el soporte de events una vez que tengo herramientas como jQuery en mi mano. Simplemente use $(function(){...}) y no lo piense dos veces.