Jak uruchomić JavaScript po wczytaniu strony?

736

Wykonuję zewnętrzny skrypt, używając <script>wewnętrznego <head>.

Ponieważ skrypt wykonuje się przed załadowaniem strony <body>, między innymi nie mam dostępu do . Chciałbym wykonać JavaScript po „załadowaniu” dokumentu (HTML w pełni pobrany i wbudowany w RAM). Czy są jakieś zdarzenia, do których mogę się przyczepić podczas wykonywania skryptu, które zostaną wywołane podczas ładowania strony?

javascript html dom-events pageload Błysk
źródło

Odpowiedzi:

836

Te rozwiązania będą działać:

<body onload="script();">

lub

document.onload = function ...

lub nawet

window.onload = function ...

Pamiętaj, że ostatnia opcja jest lepszym rozwiązaniem, ponieważ jest dyskretna i jest uważana za bardziej standardową .

marcgg
źródło
5
Jaka jest różnica między <body onload = "script ();"> a document.onload = function ...?
Mentoliptus,
11
@mentoliptus: document.onload=nie jest narzucający się en.wikipedia.org/wiki/Unobtrusive_JavaScript
marcgg
3
skrypt w html ... nie nie nie $ (funkcja () {kod tutaj}); <- javascript.js można umieścić w głowie i załaduje się po DOM
21
@gerdi OP nie wspomniał nic o jQuery. W swojej odpowiedzi podałem również dyskretną opcję.
marcgg
1
document.onload nie działało dla mnie. Znalazłem ten post w / w tej samej sprawie stackoverflow.com/questions/5135638/... . Nie wydaje się, że document.onload jest opcją.
spottedmahn
196

Racjonalnie przenośny, niestrukturyzowany sposób ustawiania skryptu do uruchamiania w czasie ładowania:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}
chaos
źródło
10
+1 za opublikowanie prawie dokładnie tego, co musiałem wymyślić 6 miesięcy temu. Taki kod może być konieczny, jeśli inne frameworki i kod, nad którym nie masz kontroli, dodają zdarzenia onload, a Ty chcesz to zrobić bez usuwania innych zdarzeń onload. Zawarłem moją implementację jako funkcję i wymagała var newonload = function (evt) {curronload (evt); newOnload (evt); }, ponieważ z jakiegoś powodu używana przeze mnie struktura wymaga przekazania zdarzenia do zdarzenia onload.
Grant Wagner
6
Właśnie odkryłem podczas testowania, że ​​napisany kod powoduje, że programy obsługi są uruchamiane w nieokreślonej kolejności, gdy są dołączone za pomocą attachEvent (). Jeśli ważna jest kolejność wykonywania procedur obsługi, możesz pominąć gałąź window.attachEvent.
Grant Wagner
To doda tę funkcję jako DODATKOWĄ funkcję do uruchomienia OnLoad, prawda? (zamiast zastępować istniejące zdarzenie onload)
Clay Nichols
@ClayNichols: Poprawnie.
chaos
2
Dobre rozwiązanie, ale teraz nieaktualne: developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
Renan
192

Pamiętaj, że ładowanie strony ma więcej niż jeden etap. Btw, to jest czysty JavaScript

„DOMContentLoaded”

To zdarzenie jest uruchamiane, gdy początkowy dokument HTML został całkowicie załadowany i przeanalizowany , bez oczekiwania na zakończenie ładowania arkuszy stylów, obrazów i podramek. Na tym etapie można programowo zoptymalizować ładowanie obrazów i css w zależności od urządzenia użytkownika lub szybkości łącza.

Wykonuje się po załadowaniu DOM (przed img i css): 

document.addEventListener("DOMContentLoaded", function(){
    //....
});

Uwaga: Synchroniczny JavaScript wstrzymuje analizowanie DOM. Jeśli chcesz, aby DOM był analizowany tak szybko, jak to możliwe, po tym, jak użytkownik zażądał strony, możesz włączyć asynchroniczny JavaScript i zoptymalizować ładowanie arkuszy stylów

"Załaduj"

Zupełnie inne zdarzenie, ładowanie , powinno być używane tylko do wykrywania w pełni załadowanej strony . Bardzo popularnym błędem jest użycie obciążenia, w którym DOMContentLoaded byłby znacznie bardziej odpowiedni, więc bądź ostrożny.

Występuje po załadowaniu i przeanalizowaniu wszystkiego: 

window.addEventListener("load", function(){
    // ....
});

Zasoby MDN:

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

Lista MDN wszystkich zdarzeń:

https://developer.mozilla.org/en-US/docs/Web/Events

DevWL
źródło
1
@Peter całkiem pewny, że jest to prawdopodobnie najbardziej samodzielne, jeśli znajduje się na dole twoich plików javascript, więc wykonuje ostatnie
arodebaugh
JavaScript wstrzymuje renderowanie DOM tam, aby najlepiej umieścić go na dole strony lub załadować asynchronię javascript w nagłówku.
DevWL,
To jest najbardziej kompletna odpowiedź. ładunek jest gotowy, ale ludzie nie zdają sobie z tego sprawy.
tfont
1
Re asynchroniczny javascript : dla wyjaśnienia istnieją dwie możliwości dla skryptów, które nie uruchamiają się natychmiast. Spośród nich zwykle odkładanie jest lepsze niż asynchroniczne - ponieważ odroczenie nie przerywa parsowania / renderowania HTML - a kiedy działa, DOM jest na pewno gotowy. Wydajnie ładuj JavaScript z odroczeniem i asynchronizacją .
ToolmakerSteve
+1 Próbowałem window.onload = ...myśleć, że mój skrypt zaczeka, aż wszystko zostanie w pełni pobrane przed uruchomieniem, ale wygląda na to, że window.onloadtak się zachowuje document.addEventListener("DOMContentLoaded", ..., podczas gdy window.addEventListener("load", ...naprawdę naprawdę czeka, aż wszystko zostanie w całości pobrane. Myślałem, że to window.onloadpowinno być równoważne window.addEventListener("load", ...zamiast document.addEventListener("DOMContentLoaded", ...?? Ten sam wynik uzyskałem w Chrome i FF.
wkille
121

Możesz umieścić atrybut „onload” wewnątrz ciała

...<body onload="myFunction()">...

Lub jeśli używasz jQuery, możesz to zrobić 

$(document).ready(function(){ /*code here*/ }) 

or 

$(window).load(function(){ /*code here*/ })

Mam nadzieję, że odpowie na twoje pytanie.

Zauważ, że $ (okno) .load zostanie wykonane po wyrenderowaniu dokumentu na twojej stronie.

Nordes
źródło
65

Jeśli skrypty są ładowane w obrębie <head>dokumentu, możliwe jest użycie deferatrybutu w znaczniku script.

Przykład:

<script src="demo_defer.js" defer></script>

Od https://developer.mozilla.org :

odraczać

Ten atrybut logiczny jest ustawiony tak, aby wskazywał przeglądarce, że skrypt ma zostać wykonany po przeanalizowaniu dokumentu, ale przed uruchomieniem DOMContentLoaded.

Tego atrybutu nie można używać, jeśli atrybut src jest nieobecny (tj. W przypadku skryptów wbudowanych), w tym przypadku nie miałby żadnego efektu.

Aby osiągnąć podobny efekt dla dynamicznie wstawianych skryptów, użyj async = false. Skrypty z atrybutem odroczenia będą wykonywane w kolejności, w jakiej występują w dokumencie.

Daniel Price
źródło
Uwielbiam to rozwiązanie, ponieważ nie potrzebuję żadnego kodu javascript, ale potrzebuję tylko jednego atrybutu HTML <3
sarkiroka
27

Oto skrypt oparty na odroczonym ładowaniu pliku js po załadowaniu strony,

<script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "deferredfunctions.js";
      document.body.appendChild(element);
  }

  if (window.addEventListener)
      window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
      window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

Gdzie to umiejscowić?

Wklej kod do kodu HTML tuż przed </body>tagiem (w dolnej części pliku HTML).

Co to robi?

Ten kod mówi: poczekaj na załadowanie całego dokumentu, a następnie załaduj plik zewnętrzny deferredfunctions.js.

Oto przykład powyższego kodu - Odroczenie renderowania JS

Napisałem to w oparciu o odroczone ładowanie strony javascript pagepeed google, a także zaczerpnąłem z tego artykułu Odrocz ładowanie javascript

Szczęściarz
źródło
20

Spójrz na zaczepianie document.onloadlub w jQuery $(document).load(...).

Daniel A. White
źródło
Czy to wydarzenie jest wiarygodne? (Cross przeglądarka .. IE6 + FF2 + etc)
theFlash
1
Tak, jest to przeglądarka standardowa DOM.
Daniel A. White
16
W rzeczywistości jest to window.onload, który jest bardziej standardowy, a nie document.onload. AFAIK
Peter Bailey
11

Działające skrzypce włączone<body onload="myFunction()">

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
   function myFunction(){
    alert("Page is loaded");
   }
  </script>
 </head>

 <body onload="myFunction()">
  <h1>Hello World!</h1>
 </body>    
</html>
Aamir Shahzad
źródło
10 
<script type="text/javascript">
  function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
  }
  if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

Frankey
źródło
7

Czasami znajduję na bardziej złożonych stronach, że nie wszystkie elementy załadowały się w oknie czasowym. Ładunek jest uruchamiany. W takim przypadku dodaj setTimeout, zanim funkcja opóźni się za chwilę. Nie jest elegancki, ale jest to prosty hack, który dobrze się renderuje.

window.onload = function(){ doSomethingCool(); };

staje się...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
Charles Jaimet
źródło
5

Po prostu określ, <body onload="aFunction()">że będzie wywoływany po załadowaniu strony. Twój kod w skrypcie jest następnie załączony aFunction() { }.

Norbert Hartl
źródło
4 
<body onload="myFunction()">

Ten kod działa dobrze.

Ale window.onloadmetoda ma różne zależności. Więc może nie działać cały czas.

Akarsh Satija
źródło
3

Korzystanie z biblioteki YUI (uwielbiam to):

YAHOO.util.Event.onDOMReady(function(){
    //your code
});

Przenośny i piękny! Jeśli jednak nie używasz YUI do innych rzeczy (zobacz jego dokumentację), powiedziałbym, że nie warto go używać.

Uwaga: aby użyć tego kodu, musisz zaimportować 2 skrypty

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>
Valentin Jacquemin
źródło
3

Istnieje bardzo dobra dokumentacja na temat tego, jak wykryć, czy dokument został załadowany przy użyciu Javascript lub Jquery.

Można to osiągnąć za pomocą natywnego Javascript

if (document.readyState === "complete") {
 init();
 }

Można to również zrobić w przedziale czasowym

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

Np. Mozilla

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

Korzystanie z Jquery Aby sprawdzić, czy DOM jest gotowy

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

Aby sprawdzić, czy wszystkie zasoby są załadowane, użyj window.load

 $( window ).load(function() {
        console.log( "window loaded" );
    });

źródło
3

Użyj tego kodu z biblioteką jQuery, to zadziała idealnie.

$(window).bind("load", function() { 

  // your javascript event

});
Harish Kumar
źródło
Dodaj tutaj opis
Mathews Sunny,
3 
$(window).on("load", function(){ ... });

.ready () działa najlepiej dla mnie.

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

.load () będzie działać, ale nie będzie czekać, aż strona zostanie załadowana.

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

Nie działa dla mnie, psuje skrypt inline. Używam również jQuery 3.2.1 wraz z kilkoma innymi widelcami jQuery.

Aby ukryć nakładkę ładującą strony internetowe, używam:

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
Zach Reynolds
źródło
3

JavaScript

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

to samo dla jQuery:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});




UWAGA: - Nie używaj poniższego znacznika (ponieważ zastępuje on inne deklaracje tego samego rodzaju):

document.onreadystatechange = ...
T.Todua
źródło
1

Jak mówi Daniel, możesz użyć document.onload.

Różne frameworki javascript (jQuery, Mootools itp.) Używają niestandardowego zdarzenia „domready”, które, jak sądzę, musi być bardziej skuteczne. Jeśli rozwijasz się przy użyciu javascript, zdecydowanie polecam wykorzystanie frameworka, ponieważ znacznie zwiększają twoją wydajność.

Iain
źródło
1 

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>
Rozwiń fragment kodu

Vô Vị
źródło
4
Ta odpowiedź zależy od jquery
Chiptus
0

Radzę użyć asnycatrybutu dla tagu skryptu, który pomoże załadować zewnętrzne skrypty po załadowaniu strony

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
Kalidass
źródło
7
Według w3schools , jeśli występuje asynchronizacja: skrypt jest wykonywany asynchronicznie z resztą strony (skrypt zostanie wykonany, gdy strona będzie kontynuowała parsowanie) . Być może miałeś na myśli deferzamiast, jak wspomniany @Daniel Price?
jk7
0

użyj funkcji onload samowykonywania

window.onload = function (){
    /* statements */
}();
użytkownik7087840
źródło
2
Możesz zastąpić inne programy onloadobsługi, stosując to podejście. Zamiast tego należy dodać detektor.
Leonid Dashko