Memahami `DOMContentLoaded`
DOM Ready… kebanyakan orang menyalahartikannya dengan DOM Loaded, padahal DOM Ready itu tidak sama dengan DOM Loaded. DOM Loaded atau onload
adalah sebuah jenis event dalam JavaScript yang akan terpicu ketika seluruh halaman dan muatan yang ditransfer telah berhasil dimuat. Atau bahasa mudahnya adalah ketika indikator memuat pada peramban telah menghilang (atau berhenti berputar-putar, tergantung desain antarmuka peramban):
Sedangkan DOM Ready atau DOMContentLoaded
adalah event yang akan terpicu ketika peramban telah berhasil membaca keseluruhan elemen DOM, yaitu dari bagian awal halaman web sampai ke akhir halaman. Dari elemen <html>
sampai elemen penutupnya yaitu </html>
, tapi tidak tergantung pada apakah semua muatan telah berhasil terpanggil atau tidak. Selama peramban telah berhasil membaca elemen HTML dari awal halaman sampai akhir halaman, itu saja sudah cukup untuk memicu event ini:
// Event `DOMContentLoaded` pada peramban-peramban moderen
window.addEventListener("DOMContentLoaded", function() {}, false);
// Event `onload` (hanya bekerja jika seluruh muatan halaman telah berhasil termuat)
window.onload = function() {};
Sebuah penerapan DOMContentLoaded
dapat digambarkan sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script>
window.addEventListener("DOMContentLoaded", function() {
document.querySelector('#test-elem').style.border = "5px solid red";
}, false);
</script>
</head>
<body>
<div id="test-elem">Test</div>
</body>
</html>
Berdasarkan contoh di atas, sebuah elemen #test-elem
seharusnya akan dikenai border berwarna merah setebal 5 piksel, namun tidak jika keadaannya seperti ini. Justru, keadaan ini malah akan menampilkan konsol error karena JavaScript tidak berhasil menemukan elemen yang dimaksud:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script>
document.querySelector('#test-elem').style.border = "5px solid red";
// TypeError: document.querySelector("#test-elem") is null
</script>
</head>
<body>
<div id="test-elem">Test</div>
</body>
</html>
Berbeda dengan CSS, JavaScript hanya akan berhasil menyeleksi elemen jika elemen tersebut telah ada. Memicu fungsi untuk memberikan border pada elemen sebelum elemen tersebut berhasil terbaca tidak akan menghasilkan apapun. Untuk mengatasi masalah di atas, maka Anda cukup memastikan saja bahwa elemen yang ingin diseleksi telah terbaca oleh peramban sebelum JavaScript terpicu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div id="test-elem">Test</div>
<script>
document.querySelector('#test-elem').style.border = "5px solid red";
</script>
</body>
</html>
Akan tetapi dalam keadaan tertentu, Anda mungkin tidak bisa mengkondisikan JavaScript dengan posisi seperti di atas (mungkin masalah CMS yang tidak mengizinkan, alasan efisiensi dengan cara menyatukan semua file JavaScript ke dalam satu file berukuran besar, atau karena hal yang lain). Jika memang karena suatu alasan Anda hanya bisa meletakkan JavaScript di area <head>
, maka event DOMContentLoaded
bisa menjadi solusi. Namun, mengingat event ini hanya diadakan pada peramban-peramban moderen, Anda perlu membuat fungsi penanganan untuk membuat event pengganti seperti event ini jika peramban yang digunakan tidak dilengkapi dengan event DOMContentLoaded
. Beberapa sudah ada yang membuatnya, misalnya ini atau ini.
Pengguna JavaScript Library
Para pengguna perpustakaan JavaScript sepertinya tidak perlu begitu memikirkan mengenai ini karena sebagian besar library sudah dilengkapi dengan API untuk menangani event DOMContentLoaded
:
- jQuery -
.ready()
- MooTools - Window Event:
domready
- YUI - DOM Lifecycle Events
- Prototype - The
dom:loaded
Event - Glow -
isDomReady
- Midori - Event -
addEventListener
Jika Memang Tidak Harus
Jika Anda merasa tidak harus menggunakan event ini, maka cara yang paling praktis, aman, sesuai prosedur dan bisa bekerja pada semua peramban adalah cukup dengan meletakkan JavaScript sedekat mungkin dengan bagian akhir halaman, yaitu ketika tidak ada elemen HTML lagi di bawahnya kecuali tag penutup </body>
. Hasilnya tidak jauh berbeda dengan DOMContentLoaded
karena pada dasarnya keduanya akan memicu fungsi pada waktu yang hampir sama (hanya berbeda tipis):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
...
<script>
alert('DOM is (almost) ready!');
</script>
</body>
</html>
Atau buat fungsi utama pada area <head>
kemudian jalankan di bagian akhir halaman:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script>
function myGlobalFunction() {
alert('DOM is (almost) ready!');
}
</script>
</head>
<body>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
...
<script>myGlobalFunction();</script>
</body>
</html>
24 Komentar
Sunandar
ngga ngerti :(
Unknown
Saya tambah parah gak ngerti nya
IRIL SAGITA
Awalnya aku juga gak faham sama sekali kak, tapi setelah aku baca pelan-pelan dan berusaha memahami maknanya. :D :D :D
Sunandar
itu buat apa ya mbak ?
Damar Zaky
nggak ngerti juga heheh
Suwardi
Sama aku juga ngak ngerti....
Unknown
Saya kebanyakan membuat fungsi javascript yang saya letakkan diatas atau dalam tag head.
Kemudian cara pemanggilan fungsi itu setelah elementnya yang di maksud ada.
Unknown
Sama saya nggak ngerti mas.. baru pertama kali kenal yg namanya itu
Unknown
selalu nggk ngerti tentang javascript :'(
Anonim
Mas taufik, saya mau minta didesinkan template blogspot, tapi yang belum pernah dipakai siapa2, dan biayanya berapa ???
Bisa contact saya di fb mas https://www.facebook.com/ahmad.manarul.16
Taufik Nurrohman
Ini adalah pesan terakhir Saya kepada Anda. Saya sudah menghubungi Anda sebanyak dua sampai tiga kali semenjak pertama Anda menuliskan komentar yang sama persis seperti ini di area komentar, dan sudah menuruti apa yang Anda inginkan untuk menghubungi Anda melalui Facebook, dan juga ketika Anda menuliskan komentar yang sama kembali seperti ini pada beberapa minggu berikutnya. Saat itu Saya meminta Anda agar menggunakan email saja sebagai komunikasi tetapi tidak pernah mendapatkan respon lanjutan, malah Anda menuliskan ulang komentar seperti ini pada beberapa minggu berikutnya... sampai sekarang.
Saya tidak tahu apakah pesan Saya yang tidak sampai atau bagaimana, tetapi pada intinya, kalau sejak awal komunikasinya saja sudah sulit begini, bagaimana nanti ke depannya? Saya cuma merasa khawatir kalau pekerjaan Saya hanya akan berhenti di tengah jalan tanpa menghasilkan sesuatu.
Lagipula Saya sudah menyediakan fasilitas kontak di blog ini dengan akses yang sangat mudah. Mengapa Anda tidak berinisiatif untuk menggunakan itu, atau menggunakan media komunikasi yang lain?
Anonim
tambah pengetahuan
Anonim
Sangat menambah wawasan. thanks sobat....
Anonim
Mau memahami tapi perlu waktu untuk mempelajarinya sedikit demi sedikit :)
Unknown
hadew.. yng komen bego semua.. masak ginian aja nggak ngerti .. ?
gue aja nggak paham babar blass .. :D
uki
hua... >.<
Suwardi
hahaaaaaa Ancuuur tak kira paham malah ikutan ngak paham.... :D :D
MbahDoyok
beberapa kali menemui tutorial penambahan widget di blog luar yg mengaplikasikan cara terakhir kang
you
Mas taufik mau tanya nih...
saya ingin membuat jendela munculan facebook like box ketika halaman di buka dengan menggunakan ini
Yang menjadi pertanyaan..
Seperti itukah java scriptnya atau bagaimana cara yang benar dan cara agar hanya terpanggil serta muncul satu kali saja..?
you
satu lagi mas, hehe... Bagaimana agar termuat setelah keseluruhan hamalan sudah termuat .. ini contoh http://jsfiddle.net/6jBH7/167/
Taufik Nurrohman
→ Konfigurasi JavaScript Cookie
→ http://jsfiddle.net/6jBH7/169/embedded/result,resources,html,js,css
Sekedus
Ternyata ada banyak cara untuk memicu javascript :yaya:. Sangat inspiratif :-bd
lutfiyah
Ketika di halaman posting skrip saya display none oleh user agen stylesheet, baik di chrome ataupu firefox:
Ada yang tahu masalah ini?
Taufik Nurrohman
Tag
script
,style
danhead
misalnya, memang sudah seharusnya dihapus tampilannya oleh peramban. Kalau tidak dihapus nanti perintah-perintah di dalam kode JavaScript dan CSS akan ditampilkan sebagai teks biasa di halaman.