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.
Jawaban:
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!")
})window.onloaddipanggil ketika setiap halaman komponen / sumber daya (yaitu * termasuk * gambar). Apakah saya benar?
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.
addEventListener("load", function(){... })alih-alih menimpa onloadproperti.
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();">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
$.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 });
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
});$(window)membuat saya berpikir ini akan menjadi jquery - kan? Atau apakah saya mendapatkan beberapa sintaks javascript bingung? (Saya baru mengenal JS).
$(document).ready();ketika jQuery tersedia?
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
"interactive"tidak terisi penuh. "complete"terisi penuh
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
});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.
Dan inilah cara untuk melakukannya dengan PrototypeJS :
Event.observe(window, 'load', function(event) {
// Do stuff
});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 .
onloadpenggunaan $(window).loadsaja (jQuery):$(window).load(function() {
//code
});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;
};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!");
});