Memahami `DOMContentLoaded`

Tabel Konten
  1. Pengguna JavaScript Library 
  2. Jika Memang Tidak Harus 
  3. Referensi Lain 

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):

Indikator memuat pada peramban sedang tampil
Indikator memuat pada 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 , 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:

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 

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

    
    $(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..?

  • 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 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.

Komentar telah ditutup.