$(document).ready()เป็นjQueryเหตุการณ์ซึ่งเกิดขึ้นเมื่อเอกสาร HTML ได้รับการโหลดอย่างเต็มที่ในขณะที่window.onloadเหตุการณ์เกิดขึ้นต่อมาเมื่อทุกอย่างรวมทั้งภาพบนหน้าเว็บโหลด
window.onload ยังเป็นเหตุการณ์จาวาสคริปต์ที่แท้จริงใน DOM ในขณะที่$(document).ready()เหตุการณ์เป็นวิธีการใน jQuery
$(document).ready() มักจะเป็น wrapper สำหรับ jQuery เพื่อให้แน่ใจว่าองค์ประกอบทั้งหมดที่โหลดเข้ามาเพื่อใช้ใน jQuery ...
ดูซอร์สโค้ด jQuery เพื่อทำความเข้าใจว่ามันทำงานอย่างไร:
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 );
};
jQuery.fn.ready = function( fn ) {
// Add the callback
jQuery.ready.promise().done( fn );
return this;
};
นอกจากนี้ฉันได้สร้างภาพด้านล่างเป็นข้อมูลอ้างอิงอย่างรวดเร็วสำหรับทั้งสอง
