jQuery'nin "belgeye hazır" işlevi nasıl çalışır?

Question

jQuery, belgenin yüklü olup olmadığını nasıl kontrol eder? Belge yükünün bittiğini nasıl kontrol ediyor?

Answer 1

source code'daki bindReady işlevine bakın.

DOMContentLoaded olayına (veya bazı tarayıcılarda onreadystatechange) bağlanırlar. Ayrıca, DOMContentLoaded'in başka nedenlerle desteklenmediği veya başka nedenlerle kullanılmaması durumunda, normal yükleme olayına da bir geri dönüş var.

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

9 IE < üzerinde:: - ready fonksiyon sağa aslında bir başvuru şu çağrılarda DOMContentLoaded ikinci örneği

document.attachEvent("onreadystatechange", DOMContentLoaded); 

olduğunu

kendi işlevi onu destekleyen tarayıcılarda, onlar bu çağrıyı kullanmak Kaynak kodunda bindReady üzerinde. Bu işlev, DOM ağacının gerçekte document.body denetlenerek yapıldığını kontrol edecektir. Henüz mevcut değilse, milisaniye beklerler (setTimeout'u kullanarak) ve tekrar kontrol ederler. Document.body var olduğunda, ayarladığınız geri arama listesinin üzerinden geçerler.

// Mozilla, Opera and webkit nightlies currently support this event 
     if (document.addEventListener) { 
      // Use the handy event callback 
      document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); 

      // A fallback to window.onload, that will always work 
      window.addEventListener("load", 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", DOMContentLoaded); 

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

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

      try { 
       toplevel = window.frameElement == null; 
      } catch(e) {} 

      if (document.documentElement.doScroll && toplevel) { 
       doScrollCheck(); 
      } 
     } 

çoğu tarayıcı Yani

(Mozilla, Opera ve Webkit) bir vardır:

Answer 2

jQuery, JavaScript'in yapamadığı/yapamadığı hiçbir şey yapmaz - bu sadece bir JavaScript çerçevesi/kitaplığıdır. Ne yapar, tarayıcıların uyguladığı JavaScript olayları etrafında sarıcılar sağlar, örneğin onload ($.load()) ve DOMContentLoaded ($.ready()). Elbette, bu davranışı tarayıcılar arasında mümkün olduğunca standart hale getirmeye çalışan ve tarayıcı hataları, sorunları ve uyumsuzlukları etrafında çalışan çok sayıda çalışma var. Örneğin, IE IE 9'dan önce DOMContentLoaded'u desteklemiyordu, ancak jQuery bunun için bir uygulama sağlamak zorunda. Bu olay ne olduğu hakkında daha iyi anlamak için bu bağlantıları görmek isteyebilirsiniz ve bir hatta jQuery olmadan benzer bir şey, uygulamak nasıl:

• http://api.jquery.com/ready/#comment-85629494
• http://www.zachleat.com/web/domcontentloaded-inconsistencies/
• http://www.kryogenix.org/days/2007/09/26/shortloaded
• $(document).ready equivalent without jQuery

jQuery tarafından neler yapıldığını görmek istiyorsanız, jQuery source ürününü incelemelisiniz.

Answer 3

Yani biraz perde arkasında oluyor ama bu doğrudan jQuery kaynağı için, bunun özü buydu var JQuery'nin dinlediği, bu tetiklendiğinde, jQuery ile kaydettiğiniz tüm hazır işleyicileri çağırır. DOMContentLoaded nerede sürekli bir kod sinsi düşeni yapmak olarak

IE onlar DOMContentLoaded olayı yok gibi biraz farklı davranır, bunlar belgenin onreadystatechange olayı içine çengel deneyin, onlar da yanı, window.onload olayı kanca Her milisaniyede sayfayı dolaştırın ve dolaştırın (doScrollCheck). Bu yangınlardan hiç biri önce hazır işleyicileri tetikler ve sonraki olaylar göz ardı edilir.

Ben mantıklı ve size yardımcı oluyor :)