Bagaimana untuk Menggantikan $(document).ready() dalam Dunia Bebas jQuery?

Menyingkap Alternatif Bukan jQuery: Setara untuk $(document).ready()

Apabila memulakan usaha pembangunan web tanpa keupayaan mantap jQuery, adalah penting untuk meneroka kaedah alternatif untuk mencapai keputusan yang serupa. Satu senario sedemikian timbul apabila mencari persamaan untuk fungsi $(document).ready() yang digunakan secara meluas.

Untuk penyemak imbas yang mematuhi piawaian ECMA, coretan berikut menawarkan penggantian yang lancar:

document.addEventListener("DOMContentLoaded", function() {
  // Code goes here
});

Skrip ini mencetuskan pelaksanaan blok kod yang ditentukan sebaik sahaja pepohon Model Objek Dokumen (DOM) dimuatkan. Ia memantau struktur DOM secara eksklusif, tidak termasuk aset luaran seperti imej dan helaian gaya.

Membezakan daripada window.onload

Perlu diperhatikan bahawa window.onload tidak menyediakan fungsi yang setara dengan $(document) JQuery.ready(). Semasa window.onload menunggu semua sumber, termasuk aset luaran, dimuatkan sepenuhnya sebelum melaksanakan kod, $(document).ready() hanya mengesan ketersediaan DOM. Perbezaan halus ini boleh memberi kesan kepada tingkah laku aplikasi, terutamanya dalam situasi di mana pemuatan sumber luaran boleh menyebabkan kelewatan prestasi.

IE8 dan Keserasian Penyemak Imbas Lama

Untuk memastikan keserasian dengan IE8 dan lebih lama penyemak imbas, coretan kod berikut menyediakan pilihan alternatif:

document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Code goes here
    }
}

Skrip ini bergantung pada acara onreadystatechange dan menyemak keadaan sedia dokumen "interaktif" untuk memulakan pelaksanaan kod.

Atas ialah kandungan terperinci Bagaimana untuk Menggantikan $(document).ready() dalam Dunia Bebas jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!