Apa yang setara dengan non-jQuery dari '$ (dokumen) .ready ()'?

Apa yang setara dengan non-jQuery $(document).ready()?

Yang menyenangkan tentang itu $(document).ready()adalah api sebelumnya window.onload. Fungsi memuat menunggu hingga semuanya dimuat, termasuk aset eksternal dan gambar. $(document).readyNamun, kebakaran ketika pohon DOM selesai dan dapat dimanipulasi. Jika Anda ingin mencapai DOM siap, tanpa jQuery, Anda dapat memeriksa ke perpustakaan ini. Seseorang mengekstraksi readybagian dari jQuery. Ini bagus dan kecil dan Anda mungkin menemukan itu berguna:

sudah ada di Google Code

Ini berfungsi dengan baik, dari ECMA

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

Tidak window.onloadsama dengan JQuery $(document).readykarena $(document).readyhanya menunggu ke pohon DOM sambil window.onloadmemeriksa semua elemen termasuk aset dan gambar eksternal.

EDIT : Menambahkan IE8 dan yang lebih lama setara, berkat pengamatan Jan Derk . Anda dapat membaca sumber kode ini di MDN di tautan ini :

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}

Ada opsi lain selain "interactive". Lihat tautan MDN untuk detailnya.

Suatu hal kecil yang saya kumpulkan

domready.js

(function(exports, d) {
  function domReady(fn, context) {

    function onReady(event) {
      d.removeEventListener("DOMContentLoaded", onReady);
      fn.call(context || exports, event);
    }

    function onReadyIe(event) {
      if (d.readyState === "complete") {
        d.detachEvent("onreadystatechange", onReadyIe);
        fn.call(context || exports, event);
      }
    }

    d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
    d.attachEvent      && d.attachEvent("onreadystatechange", onReadyIe);
  }

  exports.domReady = domReady;
})(window, document);

Bagaimana cara menggunakannya

<script src="domready.js"></script>
<script>
  domReady(function(event) {
    alert("dom is ready!");
  });
</script>

Anda juga dapat mengubah konteks di mana panggilan balik berjalan dengan memberikan argumen kedua

function init(event) {
  alert("check the console");
  this.log(event);
}

domReady(init, console);

Sekarang tahun 2018 inilah metode cepat dan sederhana.

Ini akan menambah pendengar acara, tetapi jika sudah dipecat kami akan memeriksa bahwa dom dalam keadaan siap atau sudah selesai. Ini dapat diaktifkan sebelum atau setelah sub-sumber daya selesai memuat (gambar, stylesheet, bingkai, dll).

function domReady(fn) {
  // If we're early to the party
  document.addEventListener("DOMContentLoaded", fn);
  // If late; I mean on time.
  if (document.readyState === "interactive" || document.readyState === "complete" ) {
    fn();
  }
}

domReady(() => console.log("DOM is ready, come and get it!"));

Bacaan tambahan

• https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
  • Memeriksa apakah memuat sudah selesai
• https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

Memperbarui

Berikut beberapa pembantu utilitas cepat menggunakan ES6 Impor & Ekspor standar yang saya tulis yang menyertakan TypeScript juga. Mungkin saya bisa menyiasati untuk membuat ini perpustakaan cepat yang dapat diinstal ke proyek sebagai ketergantungan.

JavaScript

export const domReady = (callBack) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

TypeScript

export const domReady = (callBack: () => void) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack: () => void) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

Janji

export const domReady = new Promise(resolve => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', resolve);
  }
  else {
    resolve();
  }
});

export const windowReady = new Promise(resolve => {
  if (document.readyState === 'complete') {
    resolve();
  }
  else {
    window.addEventListener('load', resolve);
  }
});

Menurut http://youmightnotneedjquery.com/#ready pengganti yang bagus yang masih berfungsi dengan IE8 adalah

function ready(fn) {
  if (document.readyState != 'loading') {
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

// test
window.ready(function() {
    alert('it works');
});

perbaikan : Secara pribadi saya juga akan memeriksa apakah jenis fnfungsi. Dan sebagai @elliottregan disarankan hapus pendengar acara setelah digunakan.

Alasan saya menjawab pertanyaan ini terlambat adalah karena saya mencari jawaban ini tetapi tidak dapat menemukannya di sini. Dan saya pikir ini adalah solusi terbaik.

Ada pengganti berbasis standar, DOMContentLoaded yang didukung oleh lebih dari 90% browser, tetapi bukan IE8 (Jadi, di bawah ini, gunakan kode oleh JQuery untuk dukungan browser) :

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

Fungsi asli jQuery jauh lebih rumit dari sekedar window.onload, seperti yang digambarkan di bawah ini.

function bindReady(){
    if ( readyBound ) return;
    readyBound = true;

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", function(){
            document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
            jQuery.ready();
        }, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", arguments.callee );
                jQuery.ready();
            }
        });

        // If IE and not an iframe
        // continually check to see if the document is ready
        if ( document.documentElement.doScroll && window == window.top ) (function(){
            if ( jQuery.isReady ) return;

            try {
                // If IE is used, use the trick by Diego Perini
                // http://javascript.nwbox.com/IEContentLoaded/
                document.documentElement.doScroll("left");
            } catch( error ) {
                setTimeout( arguments.callee, 0 );
                return;
            }

            // and execute any waiting functions
            jQuery.ready();
        })();
    }

    // A fallback to window.onload, that will always work
    jQuery.event.add( window, "load", jQuery.ready );
}

Dalam JavaScript vanilla biasa, tanpa perpustakaan? Itu kesalahan.$hanyalah sebuah pengidentifikasi, dan tidak terdefinisi kecuali Anda mendefinisikannya.

jQuery mendefinisikan $sebagai "objek segalanya" miliknya sendiri (juga dikenal sebagai jQueryAnda dapat menggunakannya tanpa bertentangan dengan pustaka lain). Jika Anda tidak menggunakan jQuery (atau perpustakaan lain yang mendefinisikannya), maka $tidak akan ditentukan.

Atau apakah Anda bertanya apa yang setara dalam JavaScript biasa? Dalam hal ini, Anda mungkin ingin window.onload, yang tidak persis setara, tetapi merupakan cara tercepat dan termudah untuk mendekati efek yang sama dalam JavaScript vanilla.

Cara termudah di browser terbaru adalah menggunakan GlobalEventHandlers yang sesuai , diDOMContentLoaded , onload , onloadeddata (...)

onDOMContentLoaded = (function(){ console.log("DOM ready!") })()

onload = (function(){ console.log("Page fully loaded!") })()

onloadeddata = (function(){ console.log("Data loaded!") })()

Acara DOMContentLoaded dipecat ketika dokumen HTML awal telah dimuat dan diurai sepenuhnya, tanpa menunggu stylesheet, gambar, dan subframe selesai dimuat. Event load yang sangat berbeda harus digunakan hanya untuk mendeteksi halaman yang dimuat penuh. Ini adalah kesalahan yang sangat populer untuk menggunakan load di mana DOMContentLoaded akan jauh lebih tepat, jadi berhati-hatilah.

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Fungsi yang digunakan adalah IIFE, sangat berguna dalam kasus ini, karena memicu dirinya sendiri ketika siap:

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

Jelas lebih tepat untuk menempatkannya di akhir skrip apa pun.

Di ES6, kita juga bisa menuliskannya sebagai fungsi panah:

onload = (() => { console.log("ES6 page fully loaded!") })()

Yang terbaik adalah menggunakan elemen DOM, kita bisa menunggu variabel siap, yang memicu IIFE panah.

Perilaku tersebut akan sama, tetapi dengan dampak memori yang lebih sedikit.

footer = (() => { console.log("Footer loaded!") })()

<div id="footer">

Dalam banyak kasus, objek dokumen juga memicu ketika siap , setidaknya di browser saya. Sintaksnya sangat bagus, tetapi perlu pengujian lebih lanjut tentang kompatibilitas.

document=(()=>{    /*Ready*/   })()

Tubuh onLoad juga bisa menjadi alternatif:

<html>
<head><title>Body onLoad Exmaple</title>

<script type="text/javascript">
    function window_onload() {
        //do something
    }
</script>

</head>
<body onLoad="window_onload()">

</body>
</html>