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
*/