{{ message }}

Trik Menempatkan Document Ready Event Pada JQuery

30/07/2017 | Javascript
Trik Menempatkan Document Ready Event Pada JQuery

Mengetahui dokumen sudah sampai pada tahap ready pada saat menulis script JQuery adalah sangat penting. Karena sebagian besar aktifitas yg dilakukan kita saat menggunakan library ini adalah pengolahan DOM (Document Object Model). Perintah manipulasi DOM yg kita lakukan taakan berjalan jika dokumen masih dalam keadaan belum ready. Untuk itu adalah penting bagi kita untuk mengetahui dimanakah keadaan ready tersebut dan dimana tempat yg paling baik untuk meletakan script JQuery agar tidak bermasalah.

Keadaan dokumen ready adalah keadaan dimana seluruh tag-tag html sudah selesai di load oleh web browser, sehingga kita dapat memanipulasinya dengan Javascript ataupun JQuery. Karena itu kalau kita menempatkan program Javascript atau JQuery kita sebelum dokumen tersebut selesai di load, maka perintah-perintah manipulasi DOM kita tak dapat berjalan bahkan besar kemungkinan terjadinya error di script Anda. JQuery sendiri menyediakan satu event yaitu On Ready untuk memastikan script Anda hanya akan berjalan ketika dokumen benar-benar siap untuk di manipulasi. Berikut ini scriptnya;

$(document).on('ready', function () {
    // Disini seharusnya Anda menempatkan script Anda
    // Script yg diletakan disini hanya akan dieksekusi 
    // Ketika dokumen benar-benar telah selesai diload
});

Ataupun Anda dapat menggunakan cara yg lebih pendek yaitu dengan perintah;

$(document).ready(function () { ... });

Atau dengan syntax yg paling pendek dan saya sendiri sering pakai ini;

$(function () {
    // Disini seharusnya Anda menempatkan script Anda
    // Script yg diletakan disini hanya akan dieksekusi 
    // Ketika dokumen benar-benar telah selesai diload
});

Menempatkan Script di Footer Adalah yg Terbaik

Tapi ada lagi cara yg lebih baik yaitu tanpa fungsi Ready sama sekali. Yaitu dengan menempatkan script Anda di footer (bagian paling bawah dokumen sebelum tag penutup body). Cara ini sangat saya rekomendasikan karena script yg dieksekusi di footer akan terjadi dipertengahan, yaitu ketika seluruh tag-tag yg diperlukan selesai diload tetapi sebelum event ready JQuery dieksekusi.

<html>
    <head>
    ...
    ...
    </head>
<body>
 
    ...
    ...
 
    <!-- Disini seharusnya Anda meletakan script Anda -->
    <script src="..."></script>
    <script>
        // Silakan meletakan perintah JQuery Anda disini
        // Langsung tanpa menggunakan event ready JQuery
    </script>
 
</body>
</html>

Dengan trik penempatan script di footer ini maka keuntungannya adalah;

  1. Script Anda akan lebih cepat diload saat pertama (meningkatkan performa). Ini dikarenakan script dijalankan satu waktu lebih cepat daripada saat event document ready terjadi.
  2. Script manipulasi DOM Anda dapat diyakini berjalan dengan baik. Ini karena script ditempatkan difooter dimana seluruh tag yg diperlukan telah ditulis sebelumnya diatasnya. Mengingat proses interpretasi oleh browser adalah perbaris yaitu dari atas ke bawah.