Blog ini akan menunjukkan perbedaan antara window.onload dan document.onload di JavaScript.
window.onload vs document.onload di JavaScript
“ window.onload ” acara dipecat ketika seluruh halaman (termasuk sumber dayanya) telah selesai dimuat. Artinya, Anda dapat menggunakan peristiwa ini untuk memastikan laman dimuat sepenuhnya sebelum menjalankan kode apa pun yang bergantung pada konten laman.
“ document.onload ” mirip dengan window.onload, tetapi hanya aktif ketika DOM dokumen (struktur konten halaman) telah selesai dimuat. Ini menandakan bahwa Anda dapat menggunakan acara ini untuk memastikan bahwa konten halaman dimuat sepenuhnya dan siap untuk dimanipulasi sebelum menjalankan kode apa pun.
Apa Pendekatan Terbaik untuk Diikuti?
Secara umum, sebaiknya gunakan document.onload daripada window.onload jika Anda hanya perlu memastikan bahwa konten halaman dimuat sepenuhnya sebelum menjalankan kode Anda. Ini karena document.onload akan diaktifkan lebih cepat daripada window.onload, yang dapat meningkatkan kinerja kode Anda. Namun, jika Anda perlu memastikan bahwa sumber daya halaman (seperti gambar dan lembar gaya) dimuat sepenuhnya sebelum menjalankan kode Anda, Anda harus menggunakan window.onload sebagai gantinya.
Bagaimana Cara Menggunakan window.onload vs document.onload di JavaScript?
Dalam contoh yang diberikan, kita akan melihat bagaimana kejadian ini mengidentifikasi pemuatan dokumen dan pemuatan jendela sebelum menjalankan kode apa pun.
Panggil “ document.onload ” yang memberi tahu Anda bahwa dokumen dimuat menggunakan pesan alert():
dokumen. memuat = peringatan ( 'document_onload' ) ;Panggil “ window.onload ” dan tetapkan pesan yang dihasilkan dari metode alert() ke dalamnya:
jendela. memuat = peringatan ( 'window_onload' ) ;
Seperti yang Anda lihat, ketika halaman disegarkan, dokumen pertama dimuat, dan kemudian metode pemuatan jendela dipanggil ketika seluruh halaman selesai dimuat:
Itu semua tentang event window.onload dan document.onload di JavaScript.
Kesimpulan
“ window.onload ' dan ' document.onload ” adalah dua peristiwa JavaScript untuk memastikan halaman lengkap dimuat sebelum mengeksekusi kode apa pun. document.onload akan menyala lebih cepat daripada window.onload, yang dapat meningkatkan kinerja kode. Blog ini menunjukkan perbedaan antara window.onload dan document.onload di JavaScript.