Peristiwa load_ dipicu ketika seluruh halaman telah dimuat, termasuk semua sumber daya yang bergantung seperti lembar gaya, skrip, iframe, dan gambar. Ini berbeda dengan DOMContentLoaded_, yang diaktifkan segera setelah DOM halaman dimuat, tanpa menunggu sumber daya selesai dimuat
Acara ini tidak dapat dibatalkan dan tidak menggelembung
Catatan. Semua peristiwa bernama load tidak akan disebarkan ke Window, bahkan dengan window.addEventListener("load", (event) => { console.log("page is fully loaded"); }); 0 diinisialisasi ke window.addEventListener("load", (event) => { console.log("page is fully loaded"); }); 1. Untuk menangkap load acara di window.addEventListener("load", (event) => { console.log("page is fully loaded"); }); 3, acara load itu harus dikirim langsung ke window.addEventListener("load", (event) => { console.log("page is fully loaded"); }); 3
Catatan. Peristiwa load_ yang dikirim saat dokumen utama dimuat dikirim pada window.addEventListener("load", (event) => { console.log("page is fully loaded"); }); 3, tetapi memiliki dua properti yang dimutasi. window.addEventListener("load", (event) => { console.log("page is fully loaded"); }); 8 adalah window.addEventListener("load", (event) => { console.log("page is fully loaded"); }); 9, dan window.onload = (event) => { console.log("page is fully loaded"); }; 0 adalah window.onload = (event) => { console.log("page is fully loaded"); }; 1. Kedua properti ini bermutasi karena kesesuaian warisan
Dalam javascript, onload digunakan untuk mengasosiasikan suatu fungsi atau skrip, tetapi karena itu sendiri bukan fungsi, tidak ada konsep nilai kembalian.
Pengecualian Onload di JavaScript
Tidak ada pengecualian dalam atribut acara onload Javascript
Contoh
Dalam contoh di bawah ini, ketika Javascript akan di-onload maka fungsi loadFunction akan dipanggil
onload event attribute in Javascript
Hello Learner!The event will be fired when the body of this HTML loaded.
_Keluaran
Penjelasan
- Kami telah membuat HTML sederhana yang terdiri dari tag kepala untuk skrip dan tag badan untuk konten
- Dengan tag body, kami telah menggunakan atribut onload dan memberikan fungsi sebagai nilai yang ditentukan di dalam tag skrip head
- Fungsi ini akan dijalankan ketika halaman selesai dimuat
- Tidak ada konten yang kompleks pada halaman itu sebabnya acara pemuatan dipicu dalam satu detik tetapi konsep ini cocok untuk halaman web yang kompleks dan skenario kehidupan nyata
Bagaimana Cara Kerja Onload JavaScript?
Acara pemuatan di HTML diaktifkan ketika objek selesai memuat, yang berarti semua sumber daya yang diperlukan telah dimuat seperti gambar, CSS eksternal, skrip, dll. Onload Javascript digunakan untuk mengeksekusi beberapa kode saat halaman dimuat sepenuhnya. Beberapa kasus penggunaan praktis mengenai kode untuk ditulis dalam skrip yang akan dieksekusi dengan peristiwa pemuatan adalah sebagai berikut
- Kami dapat menampilkan beberapa pesan kepada pengguna yang menyatakan bahwa halaman web yang Anda perlukan telah dimuat seluruhnya sehingga pengguna dapat mulai menjelajahi halaman web
- Kami dapat berkomunikasi dengan backend untuk meminta beberapa data lebih lanjut saat pemuatan halaman selesai
- Kami dapat menyajikan beberapa data saat pemuatan halaman selesai, misalnya jika ada aplikasi komersial dan pengguna sedang membaca blog di aplikasi tersebut, kami dapat menampilkan modal tentang produk perusahaan yang terkait dengan blog tersebut saat halaman tersebut, memang
Atribut peristiwa onload mengaitkan fungsionalitas yang diberikan untuk dieksekusi saat peristiwa pemuatan dipicu, peristiwa pemuatan dipicu saat pemuatan konten web selesai
Selain menggunakan onload, kita bisa menggunakan metode addEventListener dengan objek untuk mendengarkan event load
object.addEventListener("load", script);
Lebih Banyak Contoh
Contoh Kasus Penggunaan Onload di Javascript
Kami memiliki beberapa skrip eksternal, CSS eksternal, gambar, dan video di sini. Jadi, dengan onload javascript, kami ingin melakukan beberapa tindakan segera setelah semua sumber daya dimuat