Saat membuat halaman web, ada kalanya kita perlu menjalankan kode JavaScript setelah seluruh halaman selesai dimuat. Misalnya, kita ingin menampilkan animasi setelah gambar selesai dimuat, atau kita ingin memastikan elemen HTML sudah ada sebelum memanipulasinya dengan JavaScript.

Di sinilah Load Event berperan. Event ini memastikan kode JavaScript dijalankan hanya setelah semua elemen dalam dokumen, termasuk gambar dan skrip eksternal, telah selesai dimuat.

Cara Menggunakan load Event

Kita bisa menangkap peristiwa load dengan berbagai cara. Salah satunya adalah dengan menggunakan event listener pada objek window.

1. Menggunakan window.onload

Cara paling sederhana untuk menjalankan kode setelah halaman selesai dimuat:

window.onload = function() {
    console.log("Halaman sudah selesai dimuat!");
};

Saat seluruh halaman selesai dimuat, pesan "Halaman sudah selesai dimuat!" akan muncul di konsol.

2. Menggunakan addEventListener()

Metode ini lebih fleksibel dan memungkinkan kita menambahkan lebih dari satu event listener:

window.addEventListener("load", function() {
    console.log("Dokumen dan semua aset selesai dimuat!");
});

Keuntungan dari cara ini adalah kita bisa menambahkan beberapa event listener tanpa saling menimpa.

Perbedaan DOMContentLoaded vs load

Selain load, ada juga event lain yang sering digunakan, yaitu DOMContentLoaded. Keduanya memiliki perbedaan utama dalam kapan event tersebut dipicu.

Contoh penggunaan DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function() {
    console.log("HTML selesai dimuat, tetapi gambar mungkin belum!");
});

Gunakan DOMContentLoaded jika ingin menjalankan kode setelah HTML selesai dimuat tetapi tidak peduli dengan gambar atau file lainnya.

Contoh Kasus Penggunaan load Event

1. Menjalankan Animasi Setelah Halaman Dimuat

Jika kita ingin menjalankan animasi setelah semua elemen halaman selesai dimuat:

window.addEventListener("load", function() {
    document.getElementById("loader").style.display = "none";
    document.getElementById("content").style.display = "block";
});

Kode ini akan menyembunyikan elemen loading dan menampilkan konten utama setelah halaman selesai dimuat.

2. Menampilkan Peringatan Saat Halaman Selesai Dimuat

window.onload = function() {
    alert("Selamat datang! Halaman telah sepenuhnya dimuat.");
};

Saat halaman selesai dimuat, pengguna akan mendapatkan notifikasi pop-up.

3. Memastikan Gambar Sudah Selesai Dimuat

Jika ingin memastikan bahwa sebuah gambar telah selesai dimuat sebelum melakukan aksi:

document.getElementById("myImage").addEventListener("load", function() {
    console.log("Gambar telah dimuat sepenuhnya!");
});

Kode ini akan mencetak pesan ke konsol setelah gambar dengan id="myImage" selesai dimuat.

Kapan Harus Menggunakan load Event?

✅ Jika ingin menjalankan kode setelah semua elemen, termasuk gambar dan skrip eksternal, selesai dimuat.
✅ Jika ingin menampilkan halaman loading sebelum konten utama ditampilkan.
✅ Jika ingin memastikan bahwa elemen tertentu sudah ada sebelum dimanipulasi.
✅ Jika ingin melacak kapan gambar atau file eksternal selesai dimuat.

❌ Jangan gunakan load jika hanya butuh eksekusi setelah HTML selesai dimuat, gunakan DOMContentLoaded untuk itu.

Kesimpulan

• load event digunakan untuk menjalankan kode setelah seluruh halaman selesai dimuat.
• Bisa digunakan dengan window.onload atau window.addEventListener("load", callback).
• Berbeda dengan DOMContentLoaded, load memastikan semua elemen termasuk gambar dan stylesheet telah selesai dimuat.
• Berguna untuk menjalankan animasi, menyembunyikan loader, atau melakukan aksi setelah halaman siap sepenuhnya.

Dengan memahami cara kerja load event, kita bisa lebih mengontrol kapan dan bagaimana kode JavaScript dijalankan dalam siklus pemuatan halaman.