jQuery $ (okno) .load nie działa zgodnie z oczekiwaniami

Question

Wpadłem na coś, czego nie spodziewałem się dzisiaj, usuwając część funkcji, która wcześniej była załadowana do mojego potoku aktywów, ale musiałem zostać wyodrębniony do częściowego dla jakiegoś A/Testowanie B.

Używam biblioteki bigVideo.js do załadowania pełnoekranowego filmu na stronę. BigVideo.js zaczął ładować nieprawidłowe wymiary dzisiaj, kiedy wyodrębniłem kod do częściowego. Częściowe obciążenia poniżej reszty zasobów javascript.

Poprzednio miałem kod zapakowany w anonimową funkcję wewnątrz mojego normalnego potoku aktywów.

oryginalny kod (praca)

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

Następnie próbowałem ustawić tę zmienną równą tak mogę nazwać w częściowym. Rozpoczęło się ładowanie filmu bez użycia prawidłowych wymiarów.

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

w częściowej:

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

Wyglądało to jak coś się dzieje z wymiarami DOM nie w pełni załadunku, więc próbowałem włączeniu funkcji coś takiego:

w częściowym :

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

Nadal nie ma szczęścia.

Wreszcie, uciekają się do korzystania window.onload

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

To działa ?! Dlaczego więc $ (window) .load nie działa tutaj, a window.onload działa poprawnie?

Answer 1

Istnieje kilka różnych zdarzeń można użyć, aby mieć pewność, DOM jest gotowy:

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

jest taka sama jak

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

i jest wykonywany kiedy dokument HTML jest załadowany. Z drugiej strony można użyć

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

który deprecated odpowiednik

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

co zdarza się później, kiedy nie tylko dokument HTML jest załadowany, ale także wszystkie związane zasoby, takie jak obrazy i stylów, jak również. Więcej informacji na temat różnic można przeczytać here.

W nowoczesnych przeglądarkach istnieje również opcja użycia document.ondomcontentready, która jest odpowiednikiem niestandardowego document.ready dodanego przez jQuery.

Jeśli chodzi o mnie, wolę nie zadzierać z niekompatybilnością zachowania różnych przeglądarek i obsługi zdarzeń, gdy mam w ręku narzędzia takie jak jQuery. Po prostu użyj i nie myśl dwa razy.