Tematem tego wpisu jest funkcja onload, czyli funkcja wywoływana w momencie załadowania całego DOM. Jako, że jestem na etapie przechodzenia z jQuery na JS, to mam swoje przyzwyczajenia i oczekiwania wobec funkcji. Pomimo, że zarówno w jQuery jak i JS możemy odwoływać się do elementu window oraz stanu load, to istnieją różnice pomiędzy window.onload (Vanilla JS) a $(window).load (jQuery).
jQuery window onload function:
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
alert("window is loaded");
});
// or
function foo () {
alert("window is loaded");
}
$(window).load(foo);Vanilla Javascript onload function:
window.onload = (event) => {
alert("window is loaded");
};
// or
const foo = () => {
alert("window is loaded");
}
window.onload = foo;
Problem pojawia się jeżeli potrzebujemy wywołać kilka funkcji zaraz po załadowaniu strony. jQuery obsługuje kilka występujących po sobie funckcji onload:
$(window).load(foo);
$(window).load(bar);
$(window).load(lorem);
function foo () {
console.log("foo");
}
function bar () {
console.log("bar");
}
function lorem () {
console.log("lorem");
}
/* Console Output
foo
bar
lorem
*/VanillaJS niestety nie obsługuje wielokrotnego występowania window.onload. Jeżeli przeglądarka wykryje kilka „listenerów” przypisanych do window.onload, zostanie wykonana ostatnia przypisana funkcja – onload zostanie nadpisane.
window.onload = foo;
window.onload = bar;
window.onload = lorem;
function foo () {
console.log("foo");
}
function bar () {
console.log("bar");
}
function lorem () {
console.log("lorem");
}
/* Console Output
lorem
*/Rozwiązaniem tego problemu jest użycie addEventListener’a. Do elementu window dodajemy nasłuchiwanie, i w momencie osiągnięcia stanu „load” zostanie wyświetlony alert (kod poniżej).
window.addEventListener('load', (event) => {
alert("window is loaded")
})
// or
const foo = () => {
alert("window is loaded")
}
window.addEventListener('load', foo)A więc po co ten wpis skoro to takie proste? Otóż, window.addEventListener nie działa na wszystkich przeglądarkach (nie działa na IE, a jakże by inaczej). W przypadku starszych przeglądarek zamiast addEventListener’a można użyć attachEvent.
Optymalnym rozwiązaniem jest utworzonie funkcji która pozwoli na dodawanie obsłużenie wielu funkcji, zapewniając kompatybilność ze starszymi przeglądarkami.
Rozwiązanie:
// Create function
const addFunctionOnWindowLoad = (callback) => {
if (window.addEventListener) {
window.addEventListener('load', callback, false);
} else {
window.attachEvent('onload', callback);
}
}
function foo () {
console.log("foo");
}
function bar () {
console.log("bar");
}
function lorem () {
console.log("lorem");
}
// using
addFunctionOnWindowLoad(foo)
addFunctionOnWindowLoad(bar)
addFunctionOnWindowLoad(lorem)
/* Console Output
foo
bar
lorem
*/
1 Response
[…] Jak widzisz, użyłem addEventListener nie tylko na button.js-add-to-cart ale również na elemecie window, ale o tym możesz poczytać tutaj […]