Apa Itu HTML/JS Onload dan Bagaimana Cara Kerjanya?
Table of content:
Konsep onload HTML/JS dapat membantu Anda mengontrol perilaku halaman web setelah dimuat.
Baca Juga:
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.
- Dalam file HTML baru bernama index.htmltambahkan kode HTML dasar berikut:
<!DOCTYPE html>
<html>
<head>
<title>Example using onload</title>
</head>
<body>
<h1>Example using onload()</h1>
<p>This example demonstrates how to use the onload() event in JavaScript.</p>
</body>
</html> - 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:
<body>
<script src="script.js"></script>
</body> - Di dalam konten di tag tubuh HTML Anda, tambahkan tag paragraf kosong.
<p id="output"></p> - Di dalam file JavaScript, tambahkan window.onload fungsi acara. Ini akan dijalankan ketika halaman telah dimuat:
window.onload = function() {
}; - Di dalam fungsi, isi konten tag paragraf kosong. Ini akan mengubah tag paragraf untuk menampilkan pesan hanya ketika halaman telah dimuat:
document.getElementById("output").innerHTML = "Page loaded!"; - Alternatifnya, Anda juga dapat 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.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("output").innerHTML = "Page loaded!";
}); - Buka file index.html di browser web, untuk melihat pesan saat halaman selesai dimuat:
- 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:
<body onload="init()"> - 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.
function init() {
document.getElementById("output").innerHTML = "Page loaded!";
}
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.
- Di dalam folder yang sama dengan file index.html Anda, tambahkan gambar apapun.
- Di dalam file HTML, tambahkan tag gambar, dan tautkan atribut src ke nama gambar yang disimpan di folder.
<img id="myImage" src="Pidgeymon.png" width="300"> - Tambahkan tag paragraf kosong lainnya untuk menampilkan pesan saat gambar dimuat:
<p id="imageLoadedMessage"></p> - 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 myImage = document.getElementById("myImage");
myImage.onload = function() {
}; - Di dalam acara onload, ubah HTML bagian dalam untuk menambahkan Gambar dimuat pesan:
document.getElementById("imageLoadedMessage").innerHTML = "Image loaded!"; - Alih-alih menggunakan myImage.onloadAnda juga dapat menggunakan pendengar acara untuk mendengarkan memuat Acara JavaScript:
myImage.addEventListener('load', function() {
document.getElementById("imageLoadedMessage").innerHTML = "Image loaded!";
}); - Buka index.html di browser web untuk melihat gambar dan pesan:
- Untuk hasil yang sama, Anda juga dapat menggunakan atribut HTML onload. Mirip dengan tag body, tambahkan atribut onload ke tag img:
<img id="myImage" src="Pidgeymon.png" width="300" onload="imageLoaded()"> - Tambahkan fungsi dalam file JavaScript, untuk mengeksekusi kode saat gambar telah dimuat:
function imageLoaded() {
document.getElementById("imageLoadedMessage").innerHTML = "Image loaded!";
}
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.
- Tambahkan atribut onload ke tag skrip di file HTML Anda.
<script src="script.js" onload="LoadedJs()"></script> - Tambahkan fungsi ke file JavaScript Anda. Cetak pesan dengan masuk ke konsol browser:
function LoadedJs() {
console.log("JS Loaded by the browser!");
} - Buka file index.html di browser. Anda dapat menggunakan Chrome DevTools untuk melihat keluaran pesan apa pun ke dalam 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 lancar.
Anda dapat mempelajari lebih lanjut tentang bagaimana Anda dapat mengintegrasikan desain halaman pemuatan yang lebih menarik ke dalam situs web Anda.
Artikel Terkait
