Penjelasan terperinci tentang penggunaan kaedah ready() jquery event_jquery

Dalam pemulaan halaman, $(document).ready(function(){//code}); atau $(window).load(function(){//code});

Perbezaan antara mereka ialah sedia dicetuskan selepas struktur DOM dimuatkan dan beban dicetuskan selepas struktur DOM, css, js, imej, dsb. dalam halaman dimuatkan. Jelas sekali, sedia lebih sesuai untuk pemulaan halaman . Tetapi kadang-kadang itu tidak selalu berlaku. Perlu melihat lebih jauh ke dalam mekanisme dalamannya.

Jadi bagaimanakah bersedia secara dalaman menentukan bahawa struktur DOM telah dimuatkan? Dan bagaimanakah pelayar yang berbeza menilainya?

Jawapannya terletak dalam kod jquery, dengan mengandaikan versi jquery ialah jquery-1.11.3.js.

Kod kunci sedia (baris 3507~3566), kod kunci ditandakan dengan warna merah:

jQuery.ready.promise = function( obj ) {
  if ( !readyList ) {

    readyList = jQuery.Deferred();

    // Catch cases where $(document).ready() is called after the browser event has already occurred.
    // we once tried to use readyState "interactive" here, but it caused issues like the one
    // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
    if ( document.readyState === "complete" ) {
      // Handle it asynchronously to allow scripts the opportunity to delay ready
      setTimeout( jQuery.ready );

    // Standards-based browsers support DOMContentLoaded
    } else if ( document.addEventListener ) {
      // Use the handy event callback
      document.addEventListener( "DOMContentLoaded", completed, false );

      // A fallback to window.onload, that will always work
      window.addEventListener( "load", completed, false );

    // If IE event model is used
    } else {
      // Ensure firing before onload, maybe late but safe also for iframes
      document.attachEvent( "onreadystatechange", completed );

      // A fallback to window.onload, that will always work
      window.attachEvent( "onload", completed );

      // If IE and not a frame
      // continually check to see if the document is ready
      var top = false;

      try {
        top = window.frameElement == null && document.documentElement;
      } catch(e) {}

      if ( top && top.doScroll ) {
        (function doScrollCheck() {
          if ( !jQuery.isReady ) {

            try {
              // Use the trick by Diego Perini
              // http://javascript.nwbox.com/IEContentLoaded/
              top.doScroll("left");
            } catch(e) {
              return setTimeout( doScrollCheck, 50 );
            }

            // detach all dom ready events
            detach();

            // and execute any waiting functions
            jQuery.ready();
          }
        })();
      }
    }
  }
  return readyList.promise( obj );
};

Kod di atas boleh dibahagikan kepada dua bahagian apabila sedia dicetuskan

1. Pencetus di bawah penyemak imbas standard

Apabila penyemak imbas berdasarkan penyemak imbas standard, peristiwa "DOMContentLoaded" akan dicetuskan selepas memuatkan struktur DOM secara dalaman menggunakan peristiwa ini sebagai sumber pencetus sedia.

document.addEventListener( "DOMContentLoaded", completed, false );

2. Pencetus di bawah pelayar IE

Apabila penyemak imbas adalah IE, kerana IE (yang sangat menyakitkan dan berkuasa) tidak menyokong acara "DOMContentLoaded", anda perlu mencari cara lain,

        (function doScrollCheck() {
          if ( !jQuery.isReady ) {

            try {
              // Use the trick by Diego Perini
              // http://javascript.nwbox.com/IEContentLoaded/
              top.doScroll("left");
            } catch(e) {
              return setTimeout( doScrollCheck, 50 );
            }

            // detach all dom ready events
            detach();

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

Kaedah di bawah IE ialah menggunakan kaedah "document.documentElement.doScroll("left")" dalam teks merah kod di atas untuk menatal halaman Jika ia tidak dimuatkan, tunggu selama 50 milisaat dan teruskan menatal sehingga ia tatal Kemudian pencetus bersedia.

Namun, jika terdapat bingkai dalam halaman, acara window.onload akan digunakan sebagai sumber pencetus siap.

Jadi di bawah IE, apabila terdapat bingkai dalam halaman, sedia tidak akan dicetuskan sehingga semua kandungan dalam halaman dimuatkan.

Perbezaan antara acara sedia dan muatkan dalam jQuery

Apabila anda menggunakan jQuery di tempat kerja, anda mesti melakukan ini sebelum menggunakannya:

//document ready
$(document).ready(function(){
  ...code...
})
//document ready 简写
$(function(){
  ...code...
})

Kadang-kadang ia ditulis seperti ini:

//document load
$(document).load(function(){
  ...code...
})

Satu sudah siap dan satu lagi muat. Jom bincang hari ini.
Yang mana satu dilaksanakan dahulu, sedia atau muatkan:

Semasa proses temu duga, setiap orang sering ditanya soalan: Mana satu sedia dan muat dilaksanakan dahulu, dan yang mana satu dilaksanakan kemudian? Jawapannya ialah bersedia dilaksanakan dahulu dan beban dilaksanakan kemudian.
Langkah-langkah untuk memuatkan dokumen DOM:

Untuk memahami sebab sedia dilaksanakan terlebih dahulu dan pemuatan dilaksanakan kemudian, kita mesti bercakap tentang langkah-langkah memuatkan dokumen DOM dahulu:

(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load

Anda sepatutnya faham daripada huraian di atas bahawa sedia dilaksanakan selepas langkah (4) selesai. Tetapi beban tidak akan dilaksanakan sehingga langkah (6) selesai.

acara sedia:

Acara sedia dilaksanakan selepas struktur DOM dilukis. Ini memastikan bahawa walaupun sebilangan besar fail media tidak dimuatkan, kod JS masih boleh dilaksanakan.

muat acara:

Acara pemuatan mesti menunggu sehingga semua kandungan dalam halaman web dimuatkan sebelum ia dilaksanakan. Jika terdapat sejumlah besar imej dalam halaman web, keadaan ini akan berlaku: dokumen halaman web telah dipaparkan, tetapi kerana data halaman web belum dimuatkan sepenuhnya, peristiwa pemuatan tidak boleh dicetuskan serta-merta.

Ringkasan:

Saya percaya semua orang sudah faham perbezaan antara ready dan load sebenarnya, jika tiada fail media seperti gambar dalam page, ready dan load hampir sama, tetapi berbeza jika ada fail dalam page tersebut. , jadi masih disyorkan untuk semua orang bekerja pada Sedia digunakan dalam bahasa Cina.