Konsep onload HTML/JS dapat membantu Anda mengontrol perilaku halaman web setelah dimuat.

Memuat halaman web termasuk menunggu konten halaman, gambar, dan sumber daya lainnya dimuat sepenuhnya.

Beberapa laman web memastikan bahwa fungsionalitas tertentu tidak muncul hingga semuanya selesai dimuat. Contohnya termasuk mengambil data dari database hanya setelah halaman dimuat.

Ada berbagai cara untuk memeriksa apakah halaman web dimuat sepenuhnya. Anda dapat mendengarkan acara menggunakan penangan acara JavaScript, gunakan window.onload acara JavaScript, atau memuat atribut HTML.

Cara Menggunakan onLoad Dengan Elemen Body HTML

Anda dapat menggunakan peristiwa JavaScript untuk memeriksa apakah isi laman web telah dimuat. Anda memerlukan file HTML dengan beberapa konten halaman dan file JavaScript untuk mengeksekusi kode.

Kode yang digunakan dalam proyek ini tersedia di a repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT.

  1. Dalam file HTML baru bernama index.html, tambahkan kode HTML dasar berikut:
    instagram viewer 
    html>
    <html>
    <kepala>
    <judul>Contoh menggunakan onloadjudul>
    kepala>
    <tubuh>
    <h1>Contoh menggunakan onload()h1>
    <P>Contoh ini mendemonstrasikan cara menggunakan event onload() di JavaScript.P>
    tubuh>
    html>
  2. Buat file baru di folder yang sama bernama script.js. Tautkan file ini ke halaman HTML Anda menggunakan tag skrip. Anda dapat menambahkan tag skrip di bagian bawah tag tubuh:
    <tubuh>
     Konten Anda 
    <naskahsrc="skrip.js">naskah>
    tubuh>
  3. Di dalam konten di tag tubuh HTML Anda, tambahkan tag paragraf kosong.
    <Ppengenal="keluaran">P>
  4. Di dalam file JavaScript, tambahkan window.onload fungsi acara. Ini akan dijalankan ketika halaman telah dimuat:
    jendela.memuat = fungsi() {
    // kode untuk dijalankan saat halaman dimuat
    };
  5. Di dalam fungsi, isi konten tag paragraf kosong. Ini akan mengubah tag paragraf untuk menampilkan pesan hanya ketika halaman telah dimuat:
    dokumen.getElementById("keluaran").innerHTML = "Halaman dimuat!";
  6. Atau, Anda juga bisa menggunakan pendengar acara untuk mendengarkan DOMContentLoaded peristiwa. DOMContentLoaded pemicu lebih awal dari window.onload. Ini dipicu segera setelah dokumen HTML siap, daripada menunggu semua sumber daya eksternal dimuat.
    dokumen.addEventListener('DOMContentLoaded', fungsi() {
    dokumen.getElementById("keluaran").innerHTML = "Halaman dimuat!";
    });
  7. Buka file index.html di browser web, untuk melihat pesan saat halaman selesai dimuat:
  8. Alih-alih menggunakan acara JavaScript untuk memeriksa apakah halaman telah dimuat, Anda juga dapat menggunakan memuat Atribut HTML untuk hasil yang sama. Tambahkan atribut onload ke tag body di file HTML Anda:
    <tubuhmemuat="init()">
  9. Buat init() fungsi di dalam file JavaScript. Tidak disarankan untuk menggunakan atribut onload HTML dan event onload JavaScript secara bersamaan. Melakukannya dapat menyebabkan perilaku yang tidak diharapkan atau konflik antara kedua fungsi tersebut.
    fungsiinit() {
    dokumen.getElementById("keluaran").innerHTML = "Halaman dimuat!";
    }

Kami merekomendasikan penggunaan pendengar acara JavaScript dan window.onload metode di atas HTML memuat atribut karena memisahkan perilaku dan konten halaman web adalah praktik yang baik. Juga, pendengar acara JavaScript memberikan lebih banyak kompatibilitas dan fleksibilitas dibandingkan dua metode lainnya.

Cara Menggunakan onLoad Dengan Elemen Gambar HTML

Anda juga bisa menggunakan event onload untuk mengeksekusi kode saat elemen lain dimuat di halaman. Contohnya adalah elemen gambar.

  1. Di dalam folder yang sama dengan file index.html Anda, tambahkan gambar apapun.
  2. Di dalam file HTML, tambahkan tag gambar, dan tautkan atribut src ke nama gambar yang disimpan di folder.
    <imgpengenal="Gambarku"src="Pidgeymon.png"lebar="300">
  3. Tambahkan tag paragraf kosong lainnya untuk menampilkan pesan saat gambar dimuat:
    <Ppengenal="imageLoadedMessage">P>
  4. Di dalam file JavaScript, tambahkan event onload pada gambar. Gunakan id unik myImage untuk menentukan elemen gambar mana yang akan ditambahkan ke acara onload:
    var Gambarku = dokumen.getElementById("Gambarku");
    myImage.onload = fungsi() {

    };
  5. Di dalam acara onload, ubah HTML bagian dalam untuk menambahkan Gambar dimuat pesan:
    dokumen.getElementById("imageLoadedMessage").innerHTML = "Gambar dimuat!";
  6. Alih-alih menggunakan myImage.onload, Anda juga dapat menggunakan pendengar acara untuk mendengarkan memuat Acara JavaScript:
    myImage.addEventListener('memuat', fungsi() {
    dokumen.getElementById("imageLoadedMessage").innerHTML = "Gambar dimuat!";
    });
  7. Buka index.html di browser web untuk melihat gambar dan pesan:
  8. Untuk hasil yang sama, Anda juga dapat menggunakan atribut HTML onload. Mirip dengan tag body, tambahkan atribut onload ke tag img:
    <imgpengenal="Gambarku"src="Pidgeymon.png"lebar="300"memuat="gambarDimuat()">
  9. Tambahkan fungsi dalam file JavaScript, untuk mengeksekusi kode saat gambar telah dimuat:
    fungsiimageLoaded() {
    dokumen.getElementById("imageLoadedMessage").innerHTML = "Gambar dimuat!";
    }

Cara Menggunakan onLoad Saat Memuat JavaScript

Anda dapat menggunakan atribut onload HTML untuk memeriksa apakah browser telah selesai memuat file JavaScript. Tidak ada peristiwa pemuatan JavaScript yang setara untuk tag skrip.

  1. Tambahkan atribut onload ke tag skrip di file HTML Anda.
    <naskahsrc="skrip.js"memuat="DimuatJs ()">naskah>
  2. Tambahkan fungsi ke file JavaScript Anda. Cetak pesan oleh masuk ke konsol browser:
    fungsiDimuatJs() {
    menghibur.catatan("JS Dimuat oleh browser!");
    }
  3. Buka file index.html di browser. Kamu bisa gunakan Chrome DevTools untuk melihat keluaran pesan apa pun ke konsol.

Memuat Halaman Web di Browser

Sekarang Anda dapat menggunakan fungsi dan peristiwa untuk mengeksekusi kode tertentu saat halaman web selesai dimuat. Memuat halaman adalah faktor besar dalam menciptakan pengalaman pengguna yang lancar dan mulus.

Anda dapat mempelajari lebih lanjut tentang bagaimana Anda dapat mengintegrasikan desain halaman pemuatan yang lebih menarik ke dalam situs web Anda.