Các $(document).ready()là một jQuery sự kiện đó xảy ra khi tài liệu HTML đã được nạp đầy đủ, trong khiwindow.onload sự kiện xảy ra sau đó, khi tất cả mọi thứ bao gồm cả hình ảnh trên trang nạp.
Ngoài ra window.onload là một sự kiện javascript thuần túy trong DOM, trong khi $(document).ready()sự kiện này là một phương thức trong jQuery.
$(document).ready() thường là trình bao bọc cho jQuery để đảm bảo tất cả các phần tử được tải vào sẽ được sử dụng trong jQuery ...
Nhìn vào mã nguồn jQuery để hiểu cách nó hoạt động:
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;
};
Ngoài ra tôi đã tạo ra hình ảnh dưới đây như một tài liệu tham khảo nhanh cho cả hai:
