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:loadedEvent - 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>Referensi Lain
Labels: Dasar, JavaScript
24 Comments:
ngga ngerti :(
Saya tambah parah gak ngerti nya
Awalnya aku juga gak faham sama sekali kak, tapi setelah aku baca pelan-pelan dan berusaha memahami maknanya. :D :D :D
nggak ngerti juga heheh
Saya kebanyakan membuat fungsi javascript yang saya letakkan diatas atau dalam tag head.
Kemudian cara pemanggilan fungsi itu setelah elementnya yang di maksud ada.
Sama saya nggak ngerti mas.. baru pertama kali kenal yg namanya itu
selalu nggk ngerti tentang javascript :'(
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
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?
itu buat apa ya mbak ?
tambah pengetahuan
Sangat menambah wawasan. thanks sobat....
Mau memahami tapi perlu waktu untuk mempelajarinya sedikit demi sedikit :)
hadew.. yng komen bego semua.. masak ginian aja nggak ngerti .. ?
gue aja nggak paham babar blass .. :D
hua... >.<
beberapa kali menemui tutorial penambahan widget di blog luar yg mengaplikasikan cara terakhir kang
Sama aku juga ngak ngerti....
hahaaaaaa Ancuuur tak kira paham malah ikutan ngak paham.... :D :D
Mas taufik mau tanya nih...
saya ingin membuat jendela munculan facebook like box ketika halaman di buka dengan menggunakan ini
$(window).bind("load", function() {
$('#kotak-dialog').show();
$('#dialog-overlay').fadeTo(400, 0.8);
return false;
});
$('#kotak-dialog .close').click(function() {
$('#kotak-dialog').fadeOut('normal', function() {
$('iframe', this).remove();
});
$('#dialog-overlay').hide();
return false;
});
Yang menjadi pertanyaan..
Seperti itukah java scriptnya atau bagaimana cara yang benar dan cara agar hanya terpanggil serta muncul satu kali saja..?
satu lagi mas, hehe... Bagaimana agar termuat setelah keseluruhan hamalan sudah termuat .. ini contoh http://jsfiddle.net/6jBH7/167/
→ Konfigurasi JavaScript Cookie
→ http://jsfiddle.net/6jBH7/169/embedded/result,resources,html,js,css
Ternyata ada banyak cara untuk memicu javascript :yaya:. Sangat inspiratif :-bd
Ketika di halaman posting skrip saya display none oleh user agen stylesheet, baik di chrome ataupu firefox:
[img]https://4.bp.blogspot.com/-55a9X7oID8g/XDS_c9WUQ_I/AAAAAAAAFdo/gUjBXt--ao8Gn_e1fE6QucBd3hl5aL30wCLcBGAs/s1600/script-display-none.png[/img]
Ada yang tahu masalah ini?
Tag script, style dan head 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.
Post a Comment
<< Home