Bagaimana cara menjalankan suatu fungsi ketika halaman telah dimuat penuh?

307

Saya perlu menjalankan beberapa kode JavaScript saat halaman telah dimuat penuh. Ini termasuk hal-hal seperti gambar.

Saya tahu Anda dapat memeriksa apakah DOM sudah siap, tetapi saya tidak tahu apakah ini sama dengan ketika halaman dimuat sepenuhnya.

javascript Ben Shelock
sumber
7
Jadi, bagaimana Anda memeriksa apakah DOM sudah siap?
Mads Skjern

Jawaban:

442

Itu namanya load. Itu datang waaaaay sebelum DOM siap ada, dan DOM siap sebenarnya dibuat untuk alasan yang tepat yang loadmenunggu pada gambar.

window.addEventListener('load', function () {
  alert("It's loaded!")
})
Matchu
sumber
3
jadi, hanya untuk memperjelas (jika saya bisa), dibandingkan dengan DOM siap, window.onloaddipanggil ketika setiap halaman komponen / sumber daya (yaitu * termasuk * gambar). Apakah saya benar?
BreakPhreak
19
@BreakPhreak: ya :) onloadmenunggu semua sumber daya yang merupakan bagian dari dokumen. Ini tidak termasuk, tentu saja, permintaan yang dibuat secara dinamis yang bukan merupakan bagian dari dokumen itu sendiri, misalnya permintaan AJAX.
Matchu
3
skrip tidak dimuat sepenuhnya
HD ..
Bagaimana jika skrip saya mungkin dimuat secara dinamis dan peristiwa "memuat" terjadi sebelum saya menambahkan handler saya?
pamelus
31
Cara yang lebih baik adalah addEventListener("load", function(){... })alih-alih menimpa onloadproperti.
user4642212
30

Biasanya Anda dapat menggunakan window.onload, tetapi Anda mungkin memperhatikan bahwa peramban baru-baru ini tidak menyala window.onloadketika Anda menggunakan tombol riwayat maju / mundur.

Beberapa orang menyarankan contortions aneh untuk mengatasi masalah ini, tetapi sungguh jika Anda hanya membuat window.onunloadhandler (bahkan yang tidak melakukan apa-apa), perilaku caching ini akan dinonaktifkan di semua browser. The MDC mendokumentasikan ini "fitur" cukup baik, tapi untuk beberapa alasan masih ada orang yang menggunakan setIntervaldan hacks aneh lainnya.

Beberapa versi Opera memiliki bug yang dapat diatasi dengan menambahkan hal-hal berikut di halaman Anda:

<script>history.navigationMode = 'compatible';</script>

Jika Anda hanya mencoba untuk mendapatkan fungsi javascript yang disebut sekali per-tampilan (dan belum tentu setelah DOM selesai memuat), Anda dapat melakukan sesuatu seperti ini:

<img src="javascript:location.href='javascript:yourFunction();';">

Sebagai contoh, saya menggunakan trik ini untuk memuat file yang sangat besar ke dalam cache di layar pemuatan:

<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">
geocar
sumber
Adakah yang bisa menjelaskan bagaimana trik ini bekerja? Terlalu rumit untukku, doh ..
Razzle
20

Demi kelengkapan, Anda mungkin juga ingin mengikatnya ke DOMContentLoaded, yang sekarang didukung secara luas

document.addEventListener("DOMContentLoaded", function(event){
  // your code here
});

Info lebih lanjut: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

murb
sumber
7
Jawaban ini justru berlawanan dengan apa yang ditanyakan dalam pertanyaan.
Muhammad bin Yusrat
2
Memang peristiwa DOMContentLoaded dipicu ketika semua konten DOM telah dimuat, sebelum memuat semua dependensinya. Karena pengguna di utas jawaban yang direferensikan $.readysaya pikir itu memberikan kontribusi yang baik. Btw. Saya akan menggunakan addEventListener-metode juga untuk loadacara tersebut, karena memungkinkan Anda untuk memiliki beberapa panggilan balik:window.addEventListener("load", function(event){ // your code here });
murb
16

Coba ini, Hanya Jalankan Setelah Seluruh Halaman Dimuat

Dengan Javascript

window.onload = function(){
    // code goes here
};

Oleh Jquery

$(window).bind("load", function() {
    // code goes here
});
absiddique hidup
sumber
1
$(window)membuat saya berpikir ini akan menjadi jquery - kan? Atau apakah saya mendapatkan beberapa sintaks javascript bingung? (Saya baru mengenal JS).
Azendale
2
mengapa tidak menggunakan saja $(document).ready();ketika jQuery tersedia?
Andreas
Anda adalah dokumen (kurang lebih hanya parsing HTML), yang lainnya ("memuat") adalah segalanya termasuk gambar dan gaya. Tergantung pada apa yang Anda butuhkan.
amenthes
11

Coba kode ini

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

kunjungi https://developer.mozilla.org/en-US/docs/DOM/document.readyState untuk rincian lebih lanjut

Jacob Nelson
sumber
Ya, ini sangat membantu. Terima kasih banyak ~
Bravo Yeung
2
"interactive"tidak terisi penuh. "complete"terisi penuh
Ryan Walker
Akhirnya! Terima kasih satu juta, Yakub. Semua banyak metode yang tercantum di sini gagal (paling-paling, sebuah radiobutton akan diperbarui, dan perhitungan yang dihasilkan dapat dilakukan, tetapi tombol tidak akan muncul ditekan), metode Anda melakukan trik.
secr
8

acara window.onload akan diaktifkan ketika semuanya dimuat, termasuk gambar dll.

Anda ingin memeriksa status siap DOM jika Anda ingin kode js Anda dieksekusi sedini mungkin, tetapi Anda masih perlu mengakses elemen DOM.

codefly
sumber
8

Javascript menggunakan onLoad()acara tersebut, akan menunggu halaman dimuat sebelum dieksekusi.

<body onload="somecode();" >

Jika Anda menggunakan fungsi siap dokumen jQuery framework kode akan dimuat segera setelah DOM dimuat dan sebelum konten halaman dimuat:

$(document).ready(function() {
    // jQuery code goes here
});
Defoncesko
sumber
7

Anda mungkin ingin menggunakan window.onload , karena dokumen menunjukkan bahwa itu tidak diaktifkan hingga DOM siap dan SEMUA aset lainnya di halaman (gambar, dll.) Dimuat.

Marc Novakowski
sumber
Ah, brilian. Yah aku sudah melakukan ini. Gambar terakhir pada halaman ini adalah ini: <img src = "imdbupdate.php? Update = ajax" style = "display: hidden" onload = "window.location = 'movies.php? Do = admincp'" /> Namun demikian tidak mengarahkan saya
Ben Shelock
...apa? Anda ingin mengarahkan ulang begitu gambar dimuat?
Matchu
Saya tidak yakin mengapa Anda menginginkannya, tetapi alasan mengapa itu tidak dialihkan mungkin karena tampilannya: disembunyikan, dan dengan demikian browser tidak perlu memuatnya karena tidak akan ditampilkan.
Matchu
mungkin itu hanya gambar tersembunyi yang melakukan sesuatu yang penting di server, seperti melacak hit atau melakukan sesuatu di DB?
Marc Novakowski
Saya bisa mendapatkannya, tetapi untuk mengalihkan setelah tidak masuk akal bagi saya. Mengapa memiliki halaman sama sekali jika Anda tidak ingin pengguna menghabiskan waktu di sana? Dan jika tujuannya adalah untuk mengarahkan ulang pada beban, mengapa tidak hanya menggunakan event window.onload, karena ini adalah implementasi yang lebih bersih secara keseluruhan?
Matchu
3

Dan inilah cara untuk melakukannya dengan PrototypeJS :

Event.observe(window, 'load', function(event) {
    // Do stuff
});
Mark Biek
sumber
2

Di browser modern dengan javascript modern (> = 2015) Anda dapat menambahkan type="module"ke tag skrip Anda, dan semua yang ada di dalam skrip itu akan dieksekusi setelah seluruh halaman dimuat. misalnya:

<script type="module">
  alert("runs after") // Whole page loads before this line execute
</script>
<script>
  alert("runs before")
</script>

browser yang lebih lama juga akan memahami nomoduleatribut. Sesuatu seperti ini:

<script nomodule>
  alert("tuns after")
</script>

Untuk informasi lebih lanjut, Anda dapat mengunjungi javascript.info .

Pouria Moosavi
sumber
1

Jika Anda perlu menggunakan banyak onloadpenggunaan $(window).loadsaja (jQuery):

$(window).load(function() {
    //code
});
Sebastien Horin
sumber
1

The onload milik GlobalEventHandlers mixin adalah sebuah event handler untuk acara beban dari Window, XMLHttpRequest, elemen, dll, yang kebakaran ketika sumber daya telah dimuat.

Jadi pada dasarnya javascript sudah memiliki metode onload di jendela yang dieksekusi halaman mana yang terisi penuh termasuk gambar ...

Anda dapat melakukan sesuatu:

var spinner = true;

window.onload = function() {
  //whatever you like to do now, for example hide the spinner in this case
  spinner = false;
};
Alireza
sumber
-1

Pembaruan 2019: Ini adalah jawaban yang berhasil untuk saya. Karena saya memerlukan beberapa permintaan ajax untuk memecat dan mengembalikan data terlebih dahulu untuk menghitung item daftar. 

$(document).ajaxComplete(function(){
       alert("Everything is ready now!");
});
johnny norcal
sumber