Каковы различия между JavaScript window.onload и jQuery $(document).ready()?
Событие ready происходит после загрузки документа HTML, а событие onload происходит позже, когда также загружается весь контент (например, изображения).
Событие onload является стандартным событием в DOM, а событие ready - специфично для jQuery. Цель события ready заключается в том, что он должен происходить как можно раньше после загрузки документа, так что код, который добавляет функциональность элементам на странице, не должен ждать загрузки всего содержимого.
window.onload - это встроенное событие JavaScript, но поскольку его реализация имела тонкие причуды в браузерах (Firefox, Internet 6, Internet Explorer 8 и Opera), jQuery предоставляет document.ready, который абстрагирует их, и срабатывает, как только страница DOM готова (не дожидается изображений и т.д.).
$(document).ready (обратите внимание, что это не document.ready, то есть undefined) является функцией jQuery, обертыванием и обеспечением согласованности со следующими событиями:
document.ondomcontentready/document.ondomcontentloaded - новое событие, которое запускается при загрузке документа DOM (который может занять некоторое время до загрузки изображений и т.д.); опять же, немного отличается в Internet Explorer и в остальном миреwindow.onload (который реализуется даже в старых браузерах), который запускается при загрузке всей страницы (изображения, стили и т.д.). $(document).ready() - событие jQuery. Метод JQuerys $(document).ready() вызывается, как только DOM готов (что означает, что браузер проанализировал HTML и построил дерево DOM). Это позволяет запускать код, как только документ готов к работе.
Например, если браузер поддерживает событие DOMContentLoaded (как это делают многие браузеры, отличные от IE), он запускает это событие. (Обратите внимание, что событие DOMContentLoaded было добавлено только в IE в IE9 +.)
Для этого можно использовать два синтаксиса:
$( document ).ready(function() {
console.log( "ready!" );
});
Или сокращенная версия:
$(function() {
console.log( "ready!" );
});
Основные пункты для $(document).ready():
$ на jQuery, когда вы получите "$ не определено".$(window).load(). window.onload() - это родная функция JavaScript. Событие window.onload() запускается, когда загружается весь контент на вашей странице, включая DOM (модель объекта документа), баннерные объявления и изображения. Другое отличие между ними состоит в том, что, хотя мы можем иметь более одной функции $(document).ready(), мы можем иметь только одну функцию onload.
A Событие загрузки Windows запускается, когда весь контент на вашей странице полностью загружен, включая контент DOM (модель объектной модели документа) и асинхронный JavaScript, фреймы и изображения. Вы также можете использовать тело onload =. Оба одинаковы; window.onload = function(){} и <body onload="func();"> - это разные способы использования одного и того же события.
Событие функции jQuery $document.ready выполняется бит раньше, чем window.onload, и вызывается, как только объектная модель DOM (Document object) загружается на вашу страницу. Он не будет ждать, пока изображения, кадры будут полностью загружены.
Взято из следующей статьи:
как $document.ready() отличается от window.onload()
Предупреждение об использовании $(document).ready() в Internet Explorer. Если HTTP-запрос прерван до того, как весь документ будет загружен (например, пока страница будет передана в браузер, будет нажата другая ссылка) IE запустит событие $(document).ready.
Если какой-либо код в событии $(document).ready() ссылается на объекты DOM, существует потенциал для того, чтобы эти объекты не были найдены, и могут возникнуть ошибки Javascript. Либо охраняйте свои ссылки на эти объекты, либо отложите код, который ссылается на эти объекты на событие window.load.
Я не смог воспроизвести эту проблему в других браузерах (в частности, Chrome и Firefox).
$(document).ready(function() {
// Executes when the HTML document is loaded and the DOM is ready
alert("Document is ready");
});
// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {
// Executes when complete page is fully loaded, including
// all frames, objects and images
alert("Window is loaded");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> $(document).on('ready', handler) привязывается к событию готовности из jQuery. Обработчик называется , когда DOM загружается. Активы, подобные изображениям, возможно, отсутствуют.. Он никогда не будет вызываться, если документ готов к моменту привязки. jQuery использует DOMContentLoaded -Event для этого, подражая ему, если он недоступен.
$(document).on('load', handler) - это событие, которое будет запущено после загрузки всех ресурсов с сервера. Теперь изображения загружаются. Пока onload является необработанным событием HTML, ready создается jQuery.
$(document).ready(handler) фактически promise. Обработчик будет вызываться немедленно, если документ готов во время вызова. В противном случае он привязывается к ready -Event.
До jQuery 1.8, $(document).load(handler) существовал как псевдоним $(document).on('load',handler).
Всегда используйте window.addEventListener чтобы добавить событие в окно. Потому что таким образом вы можете выполнить код в разных обработчиках событий.
Правильный код:
window.addEventListener('load', function () {
alert('Hello!')
})
window.addEventListener('load', function () {
alert('Bye!')
}) $(document).ready() - это событие jQuery, которое происходит, когда документ HTML полностью загружен, а событие window.onload происходит позже, когда все, включая изображения на странице, загружается.
Также window.onload - это чисто javascript-событие в DOM, а событие $(document).ready() - это метод в jQuery.
$(document).ready() обычно является оберткой для 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;
};
Также я создал изображение ниже как краткое описание для обоих:
window.onload: обычное событие JavaScript.
document.ready: Определенное событие jQuery, когда весь HTML был загружен.
Одна вещь, которую нужно помнить (или, я должен сказать, напомнить), состоит в том, что вы не можете выполнять onload как вы можете, с ready. Другими словами, jQuery magic позволяет несколько ready на одной странице, но вы не можете сделать это с помощью onload.
Последняя onload будет отменять любые предыдущие onload.
Хороший способ справиться с этим - функция, написанная, по-видимому, одним Саймоном Виллисоном и описанная в разделе "Использование нескольких функций JavaScript для загрузки".
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* More code to run on page load */
});
Document.ready (событие jQuery) срабатывает, когда все элементы находятся на месте, и на них можно ссылаться в коде JavaScript, но содержимое не обязательно загружается. Document.ready выполняется при загрузке документа HTML.
$(document).ready(function() {
// Code to be executed
alert("Document is ready");
});
Однако window.load будет ожидать полной загрузки страницы. Это включает в себя внутренние кадры, изображения и т.д.
$(window).load(function() {
//Fires when the page is loaded completely
alert("window is loaded");
});
Событие document.ready происходит, когда документ HTML загружен, а событие window.onload происходит всегда позже, когда загружается весь контент (изображения и т.д.).
Вы можете использовать событие document.ready если хотите вмешаться "рано" в процесс рендеринга, не дожидаясь загрузки изображений. Если вам нужны изображения (или любые другие "контенты"), готовые до того, как ваш скрипт "что-то сделает", вам нужно подождать до window.onload.
Например, если вы используете шаблон "Слайд-шоу", и вам нужно выполнить вычисления на основе размеров изображений, вам может понадобиться ждать window.onload. В противном случае вы можете столкнуться с некоторыми случайными проблемами, в зависимости от того, насколько быстро загружаются изображения. Ваш скрипт будет работать одновременно с потоком, который загружает изображения. Если ваш сценарий достаточно длинный или сервер достаточно быстр, вы можете не заметить проблемы, если изображения произойдут вовремя. Но самая безопасная практика позволит загружать изображения.
document.ready может быть приятным событием для того, чтобы вы могли показать какой-то знак "loading..." для пользователей, а при использовании window.onload вы можете завершить любые сценарии, которые нуждались в ресурсах, а затем, наконец, удалить "Загрузка...", знак.
Примеры :-
// document ready events
$(document).ready(function(){
alert("document is ready..");
})
// using JQuery
$(function(){
alert("document is ready..");
})
// window on load event
function myFunction(){
alert("window is loaded..");
}
window.onload = myFunction;
window.onload - встроенная функция JavaScript. window.onload при загрузке страницы HTML. window.onload может быть записана только один раз.
document.ready является функцией библиотеки jQuery. document.ready триггеры, когда HTML и весь код JavaScript, CSS и изображения, которые включены в файл HTML, полностью загружены.
document.ready может быть записано несколько раз в соответствии с требованиями.
Когда вы скажете $(document).ready(f), вы скажете скриптному движку сделать следующее:
$ и выберите его, так как он не находится в локальной области, он должен выполнить поиск хеш-таблицы, который может иметь или не иметь коллизий.ready выбранного объекта, который включает в себя другой поиск хеш-таблицы в выбранном объекте, чтобы найти метод и вызвать его. В лучшем случае это два поиска хеш-таблиц, но это игнорирует тяжелую работу, выполняемую jQuery, где $ - кухонная раковина всех возможных входов в jQuery, поэтому, вероятно, другая карта отправит запрос на исправление обработчика.
В качестве альтернативы вы можете сделать следующее:
window.onload = function() {...}
который будет
onload свойством или нет, выполнив поиск в хеш-таблице, так как это так, он называется как функция. В лучшем случае это стоит один поиск таблицы хэш-таблицы, что необходимо, потому что нужно onload нагрузку.
В идеале, jQuery будет компилировать свои запросы к строкам, которые можно вставить, чтобы делать то, что вам нужно, чтобы jQuery, но без диспетчеризации jQuery во время выполнения. Таким образом, у вас есть возможность либо
eval.Событие jQuery document.ready() будет вызываться после загрузки DOM, т.е. он не будет ждать загрузки ресурсов, например изображений. Следовательно, функции в событии jQuery ready будут выполняться после загрузки структуры HTML, не дожидаясь ресурсов. Пока событие body.onload() будет вызвано после того, как все связанные ресурсы и изображения будут полностью загружены.
Цель готового события состоит в том, что он должен появляться как можно раньше после загрузки документа, чтобы мы могли сразу добавить функциональность или обработчики событий в элементы html, не дожидаясь загрузки всей страницы. Мы можем иметь несколько document.ready() на странице, но событие Body.Onload() не может.