Kiedy używać okna".onload"?

Question

Kiedy używać okna".onload"?

W JavaScript, kiedy chcę uruchomić skrypt raz po załadowaniu strony, powinienem użyć window.onload czy po prostu napisać skrypt?

Na przykład, jeśli chcę mieć wyskakujące okienko, powinienem napisać (bezpośrednio wewnątrz tagu <script>):

alert("hello!");

Lub:

window.onload = function() {
    alert("hello!");
}

Oba wydają się działać zaraz po załadowaniu strony. Jaka jest różnica?

22

javascript onload onload-event

Author: Jonathan Lam, 2013-11-25

Source

6 answers

Inne odpowiedzi wydają się nieaktualne

Po pierwsze, umieszczanie skryptów na górze i używanie window.onload jest anty-wzorcem. W najlepszym przypadku pozostał po dniach IE lub błędnym zrozumieniu JavaScript i przeglądarki.

Możesz po prostu przenieść swoje skrypty na dół html

<html>
  <head>
   <title>My Page</title>
  </head> 
  <body>
    content
  </body>
  <script src="some-external.js"></script>
  <script>
    some in page code
  </script>
</html>

Jedynym powodem, dla którego ludzie używali window.onload, jest mylne przekonanie, że skrypty muszą znaleźć się w sekcji head. Ponieważ rzeczy są wykonywane w kolejności, jeśli skrypt był w sekcja head, a następnie ciało i treść nie istniały jeszcze według definicji wykonaj w kolejności.

Hacky obejście polegało na użyciu window.onload, aby poczekać na załadowanie się reszty strony. Przeniesienie skryptu na dół również rozwiązało ten problem i teraz nie ma potrzeby używania window.onload, ponieważ twoje ciało i zawartość zostaną już załadowane.

Bardziej nowoczesnym rozwiązaniem jest użycie znacznika defer na skryptach, ale aby użyć tego, aby wszystkie skrypty były zewnętrzne.

<head>
  <script src="some-external.js" defer></script>
  <script src="some-other-external.js" defer></script>
</head>

Ma to tę zaletę, że przeglądarka natychmiast rozpocznie pobieranie skryptów i wykona je w podanej kolejności, ale będzie czekać na ich wykonanie do momentu załadowania strony, bez potrzeby window.onload lub lepszego, ale nadal niepotrzebnego window.addEventListener('load', ...

6

Author: gman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-15 02:28:56

Oto Dokumentacja MDN .

Według niego:

Zdarzenie load zostanie wywołane na końcu procesu ładowania dokumentu. W tym momencie wszystkie obiekty w dokumencie znajdują się w DOM, a wszystkie obrazy i ramki podrzędne zostały zakończone wczytywaniem.

Twój pierwszy fragment kodu uruchomi się, gdy tylko przeglądarka trafi w to miejsce w HTML.

Drugi fragment uruchomi wyskakujące okienko, gdy DOM i wszystkie obrazy są w pełni załadowane (zobacz specs).

Biorąc pod uwagę funkcję alert(), nie ma znaczenia, w którym momencie zostanie uruchomiona(nie zależy od niczego poza obiektem window). Ale jeśli chcesz manipulować DOM - zdecydowanie powinieneś poczekać, aż poprawnie się załaduje.

4

Author: Slava Fomin II,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-23 13:32:27

To zależy od tego, czy chcesz, aby został uruchomiony, gdy element skryptu zostanie napotkany lub jeśli chcesz, aby został uruchomiony, gdy zdarzenie load zostanie wywołane (czyli po załadowaniu całego dokumentu (w tym obrazów)).

Nie zawsze ma rację.

Ogólnie jednak unikałbym przypisywania funkcji bezpośrednio do onload Na Rzecz używania addEventListener (z bibliotekami kompatybilności, jeśli potrzebowałem obsługi starszych przeglądarek).

1

Author: Quentin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-24 20:02:58

Powodem oczekiwania na załadowanie DOM jest to, że możesz kierować dowolne elementy, które ładują się po skrypcie. Jeśli tworzysz alert, to nie ma znaczenia. Załóżmy jednak, że targetowałeś div, który był w Twoim znaczniku po skrypcie, pojawi się błąd, jeśli nie poczekasz, aż ten fragment drzewa DOM się załaduje.

document.ready jest świetną alternatywą dla window.onload, Jeśli używasz jQuery.

Zobacz tutaj: okno.onload vs $(document).gotowe()

1

Author: SeeMeCode,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:26

Masz trzy alternatywy:

Bezpośrednio wewnątrz znacznika script uruchamia go zaraz po jego przetworzeniu.
Inside document.addEventListener( "DOMContentLoaded", function(){}); uruchomi go, gdy DOM będzie gotowy.
Inside window.onload function(){}) uruchomi się zaraz po załadowaniu wszystkich zasobów Strony.

0

Author: Henrik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-24 20:06:09

score 29 · Accepted Answer

Pierwszy uruchamia się, gdy przeglądarka do niego dotrze.

Drugi czeka na załadowanie okna przed uruchomieniem.

Ogólnie powinieneś zrobić drugą, ale powinieneś dołączyć do niej detektor zdarzeń zamiast definiować funkcję. Na przykład:

window.addEventListener('load', 
  function() { 
    alert('hello!');
  }, false);