Bagaimana untuk Mencapai Fungsi $(document).ready() dengan JavaScript Vanila?

Alternatif Bukan jQuery kepada $(document).ready()

Pustaka jQuery standard industri menyediakan $(document). kaedah ready(), yang membolehkan pembangun melaksanakan kod selepas Model Objek Dokumen (DOM) telah dimuatkan sepenuhnya, memastikan semua elemen boleh diakses dan kandungan halaman sedia untuk dimanipulasi. Walau bagaimanapun, apakah alternatif kepada kaedah ini apabila menggunakan JavaScript vanila?

Jawapan:

Setara bukan jQuery $(document).ready() ialah dicapai melalui pendengar acara. Coretan kod berikut menunjukkan cara untuk mencapai fungsi ini:

<code class="javascript">document.addEventListener("DOMContentLoaded", function() {
    // code to be executed when the DOM is fully loaded
});</code>

Pelaksanaan ini mencapai hasil yang sama seperti $(document).ready(), membenarkan pembangun melaksanakan kod hanya selepas DOM selesai.

Pertimbangan Tambahan:

Walaupun document.addEventListener("DOMContentLoaded") menyediakan penyelesaian untuk menunggu kesediaan DOM, ia berbeza daripada window.onload dari segi kelakuannya. $(document).ready() hanya menunggu DOM selesai, manakala window.onload menunggu kedua-dua DOM dan semua aset luaran, termasuk imej dan skrip.

Alternatif untuk Penyemak Imbas Lama ( IE8 dan ke bawah):

Untuk pelayar lama seperti Internet Explorer 8 dan ke bawah, alternatif berikut boleh digunakan:

<code class="javascript">document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // code to be executed when the DOM is fully loaded
    }
};</code>

Perlu diingat bahawa terdapat keadaan alternatif selain "interaktif." Rujuk dokumentasi Rangkaian Pembangun Mozilla (MDN) untuk mendapatkan maklumat tambahan.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Fungsi $(document).ready() dengan JavaScript Vanila?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!