Bagaimana cara menjalankan JavaScript setelah pemuatan halaman?

738

Saya menjalankan skrip eksternal, menggunakan bagian <script>dalam <head>.

Sekarang karena skrip dieksekusi sebelum halaman dimuat, saya tidak dapat mengakses <body>, antara lain. Saya ingin menjalankan beberapa JavaScript setelah dokumen telah "dimuat" (HTML sepenuhnya diunduh dan dalam-RAM). Apakah ada peristiwa yang dapat saya kaitkan saat skrip saya dijalankan, yang akan dipicu saat memuat halaman?

javascript html dom-events pageload Kilat
sumber

Jawaban:

838

Solusi ini akan bekerja:

<body onload="script();">

atau

document.onload = function ...

atau bahkan

window.onload = function ...

Perhatikan bahwa opsi terakhir adalah cara yang lebih baik karena tidak mengganggu dan dianggap lebih standar .

marcgg
sumber
5
Apa perbedaan antara <body onload = "script ();"> dan document.onload = fungsi ...?
Mentoliptus
11
@mentoliptus: document.onload=is non obtrusive en.wikipedia.org/wiki/Unobtrusive_JavaScript
marcgg
3
skrip dalam html ... tidak, tidak, tidak $ (function () {code here}); <- javascript.js dapat ditempatkan di kepala dan akan dimuat setelah DOM
21
@gerdi OP tidak menyebutkan apapun tentang jQuery. Saya juga memberikan opsi yang tidak mencolok dalam jawaban saya.
marcgg
1
document.onload tidak berfungsi untuk saya. Saya menemukan posting ini dengan masalah yang sama stackoverflow.com/questions/5135638/… . Sepertinya bukan document.onload adalah sebuah opsi.
spottedmahn
196

Sangat portabel, cara non-kerangka skrip Anda mengatur fungsi untuk dijalankan pada waktu buka:

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;
    }
}
kekacauan
sumber
10
+1 untuk memposting hampir persis apa yang saya harus buat 6 bulan yang lalu. Kode seperti ini dapat diperlukan jika kerangka kerja dan kode lain yang tidak Anda kendalikan menambahkan acara onload dan Anda ingin juga tanpa menghapus event onload lainnya. Saya menyertakan implementasi saya sebagai fungsi dan diperlukan var newonload = function (evt) {curronload (evt); newOnload (evt); } karena untuk beberapa alasan kerangka yang saya gunakan membutuhkan suatu peristiwa untuk diteruskan ke peristiwa onload.
Grant Wagner
6
Saya baru saja menemukan dalam pengujian bahwa kode sebagai hasil tertulis dalam penangan dipecat dalam urutan yang tidak ditentukan ketika dilampirkan dengan attachEvent (). Jika eksekusi order-of-handler penting, Anda mungkin ingin meninggalkan cabang window.attachEvent.
Grant Wagner
Jadi ini akan menambahkan Fungsi ini sebagai fungsi TAMBAHAN untuk menjalankan OnLoad, benar? (Daripada mengganti acara onload yang ada)
Clay Nichols
@ClayNichols: Benar.
kekacauan
2
Solusi yang bagus, tetapi sekarang kedaluwarsa: developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
Renan
192

Perlu diingat bahwa memuat halaman memiliki lebih dari satu tahap. Btw, ini adalah JavaScript murni

"DOMContentLoaded"

Acara ini dipecat ketika dokumen HTML awal telah dimuat dan diurai sepenuhnya , tanpa menunggu stylesheet, gambar, dan subframe selesai dimuat. Pada tahap ini Anda dapat secara optimal mengoptimalkan pemuatan gambar dan css berdasarkan perangkat pengguna atau kecepatan bandwidth.

Menjalankan setelah DOM dimuat (sebelum img dan css): 

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

Catatan: JavaScript Sinkron menjeda penguraian DOM. Jika Anda ingin DOM diurai secepat mungkin setelah pengguna meminta halaman, Anda dapat mengubah JavaScript Anda tidak sinkron dan mengoptimalkan pemuatan stylesheet.

"beban"

Peristiwa yang sangat berbeda, muat , seharusnya hanya digunakan untuk mendeteksi halaman yang terisi penuh . Ini adalah kesalahan yang sangat populer untuk menggunakan load di mana DOMContentLoaded akan jauh lebih tepat, jadi berhati-hatilah.

Exectues setelah semuanya dimuat dan diuraikan: 

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

Sumber Daya MDN:

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

Daftar semua acara MDN:

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

DevWL
sumber
1
@ Peter cukup yakin ini berdiri sendiri mungkin yang terbaik jika di bagian bawah file javascript Anda sehingga dijalankan terakhir
arodebaugh
Javascript berhenti membuat DOM di sana untuk cara terbaik adalah dengan meletakkannya di bagian bawah halaman atau untuk memuat javascript async di header.
DevWL
Ini adalah jawaban yang paling lengkap. Onload adalah setelah, tetapi orang tidak menyadari ini pada awalnya.
tfont
1
Kembali asinkron javascript : untuk memperjelas, ada dua pilihan untuk skrip yang tidak segera berjalan. Dari mereka, penundaan biasanya lebih baik daripada async - karena penundaan tidak akan mengganggu html parsing / rendering - dan ketika berjalan, DOM dijamin siap. Memuat JavaScript dengan efisien dengan defer dan async .
ToolmakerSteve
+1 Saya mencoba window.onload = ...berpikir bahwa skrip saya akan menunggu sampai semuanya sepenuhnya diunduh sebelum berjalan tetapi tampaknya window.onloadbenar-benar berperilaku seperti itu document.addEventListener("DOMContentLoaded", ..., sedangkan yang window.addEventListener("load", ...benar - benar menunggu semuanya diunduh sepenuhnya. Saya akan berpikir bahwa window.onloadharus setara dengan window.addEventListener("load", ...bukan document.addEventListener("DOMContentLoaded", ...?? Saya mendapat hasil yang sama di Chrome dan FF.
wkille
121

Anda dapat menempatkan atribut "membebani" di dalam tubuh

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

Atau jika Anda menggunakan jQuery, Anda bisa melakukannya 

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

or 

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

Saya harap ini menjawab pertanyaan Anda.

Perhatikan bahwa $ (window) .load akan dieksekusi setelah dokumen diberikan pada halaman Anda.

Nord
sumber
65

Jika skrip dimuat dalam <head>dokumen, maka dimungkinkan menggunakan deferatribut dalam tag skrip.

Contoh:

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

Dari https://developer.mozilla.org :

menunda

Atribut Boolean ini diatur untuk menunjukkan kepada browser bahwa skrip dimaksudkan untuk dieksekusi setelah dokumen telah diuraikan, tetapi sebelum memecat DOMContentLoaded.

Atribut ini tidak boleh digunakan jika atribut src tidak ada (yaitu untuk skrip inline), dalam hal ini tidak akan berpengaruh.

Untuk mencapai efek yang sama untuk skrip yang disisipkan secara dinamis, gunakan async = false. Script dengan atribut defer akan dieksekusi sesuai urutan kemunculannya dalam dokumen.

Daniel Price
sumber
Saya suka solusi ini, karena tidak memerlukan kode javascript, tetapi hanya perlu satu atribut html <3
sarkiroka
27

Berikut skrip berdasarkan penangguhan js yang ditangguhkan setelah halaman dimuat,

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

Di mana saya menempatkan ini?

Rekatkan kode dalam HTML Anda tepat sebelum </body>tag (dekat bagian bawah file HTML Anda).

Apa fungsinya?

Kode ini mengatakan tunggu seluruh dokumen dimuat, lalu muat file eksternal deferredfunctions.js.

Berikut adalah contoh kode di atas - Tunda Rendering JS

Saya menulis ini berdasarkan penundaan pemuatan konsep javascript pagespeed google dan juga bersumber dari artikel ini Menunda pemuatan javascript

Beruntung
sumber
20

Lihatlah hooking document.onloadatau di jQuery $(document).load(...).

Daniel A. White
sumber
Apakah acara ini dapat diandalkan? (Lintas browser .. IE6 + FF2 + dll)
TheFlash
1
Ya ini adalah lintas-browser, DOM standar.
Daniel A. White
16
Ini sebenarnya window.onload yang lebih standar, bukan document.onload. AFAIK
Peter Bailey
11

Fiddle Kerja di<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
sumber
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
sumber
7

Terkadang saya menemukan pada halaman yang lebih kompleks bahwa tidak semua elemen telah dimuat oleh window time.onload diaktifkan. Jika itu masalahnya, tambahkan setTimeout sebelum fungsi Anda untuk menunda sebentar. Itu tidak elegan tetapi ini adalah retasan sederhana yang menghasilkan dengan baik.

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

menjadi...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
Charles Jaimet
sumber
5

Cukup tentukan <body onload="aFunction()">yang akan dipanggil setelah halaman dimuat. Kode Anda dalam skrip tidak disertakan oleh aFunction() { }.

Norbert Hartl
sumber
4 
<body onload="myFunction()">

Kode ini berfungsi dengan baik.

Tetapi window.onloadmetode memiliki berbagai dependensi. Jadi mungkin tidak berfungsi sepanjang waktu.

Akarsh Satija
sumber
3

Menggunakan perpustakaan YUI (I love it):

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

Portable dan cantik! Namun, jika Anda tidak menggunakan YUI untuk hal-hal lain (lihat dokumennya) saya akan mengatakan bahwa itu tidak layak untuk digunakan.

NB: untuk menggunakan kode ini Anda perlu mengimpor 2 skrip

<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
sumber
3

Ada dokumentasi yang sangat bagus tentang Cara mendeteksi apakah dokumen telah dimuat menggunakan Javascript atau Jquery.

Menggunakan Javascript asli ini dapat dicapai

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

Ini juga dapat dilakukan di dalam interval

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

Misalnya oleh 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;
}

Menggunakan Jquery Untuk memeriksa hanya apakah DOM sudah siap

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

Untuk memeriksa apakah semua sumber daya dimuat gunakan window.load

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

sumber
3

Gunakan kode ini dengan pustaka jQuery, ini akan berfungsi dengan baik.

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

  // your javascript event

});
Harish Kumar
sumber
Tambahkan keterangan di sini
Mathews Sunny
3 
$(window).on("load", function(){ ... });

.ready () bekerja paling baik untuk saya.

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

.load () akan berfungsi, tetapi tidak akan menunggu sampai halaman dimuat.

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

Tidak berfungsi untuk saya, istirahat skrip in-to-in. Saya juga menggunakan jQuery 3.2.1 bersama dengan beberapa garpu jQuery lainnya.

Untuk menyembunyikan situs web saya memuat overlay, saya menggunakan yang berikut:

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
Zach Reynolds
sumber
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");
    }
});

sama untuk jQuery:

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

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




CATATAN: - Jangan gunakan markup di bawah ini (karena ini menimpa deklarasi sejenis lainnya):

document.onreadystatechange = ...
T.Todua
sumber
1

Seperti kata Daniel, Anda bisa menggunakan document.onload.

Berbagai kerangka kerja javascript apa pun (jQuery, Mootools, dll.) Menggunakan acara khusus 'domready', yang saya kira harus lebih efektif. Jika Anda mengembangkan dengan javascript, saya sangat merekomendasikan mengeksploitasi suatu kerangka kerja, mereka secara besar-besaran meningkatkan produktivitas Anda.

Iain
sumber
1 

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

// your javascript event here

});
</script>
Luaskan cuplikan

Vô Vị
sumber
4
Jawaban ini tergantung pada jquery
Chiptus
0

Saran saya gunakan asnycatribut untuk tag skrip yang membantu Anda memuat skrip eksternal setelah pemuatan halaman

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
Kalidass
sumber
7
Menurut w3schools , Jika ada async: Script dijalankan secara tidak sinkron dengan sisa halaman (skrip akan dieksekusi saat halaman melanjutkan parsing) . Mungkin yang Anda maksudkan defer, seperti @Daniel Price yang disebutkan?
jk7
0

gunakan fungsi eksekusi mandiri

window.onload = function (){
    /* statements */
}();
pengguna7087840
sumber
2
Anda dapat mengesampingkan onloadpenangan lain dengan menggunakan pendekatan ini. Sebagai gantinya, Anda harus menambahkan pendengar.
Leonid Dashko