window.onload vs $(document).ready()
Каковы различия между JavaScript window.onload и JQuery's $(document).ready() метод?
18 ответов
ready событие происходит после загрузки документа HTML, в то время как onload событие происходит позже, когда весь контент (например, изображения) также был загружен.
onload событие является стандартным событием в DOM, в то время как ready Событие специфично для jQuery. Цель ready событие заключается в том, что это должно произойти как можно раньше после загрузки документа, чтобы коду, который добавляет функциональность к элементам на странице, не приходилось ждать загрузки всего содержимого.
window.onload является встроенным событием JavaScript, но, поскольку его реализация имеет тонкие особенности в разных браузерах (Firefox, Internet Explorer 6, Internet Explorer 8 и Opera), jQuery предоставляет document.ready, который абстрагирует их и запускает, как только DOM страницы готов (не ждет изображений и т. д.).
$(document).ready (обратите внимание, что это не document.ready, которая не определена) - это функция jQuery, которая упаковывает и обеспечивает согласованность для следующих событий:
document.ondomcontentready/document.ondomcontentloaded- новое событие, которое возникает при загрузке DOM документа (это может произойти за некоторое время до загрузки изображений и т. д.); опять же, немного отличается в Internet Explorer и в остальном мире- а также
window.onload(который реализован даже в старых браузерах), который срабатывает при загрузке всей страницы (изображения, стили и т. д.)
$(document).ready() является событием jQuery JQuery-х $(document).ready() метод вызывается, как только DOM готов (это означает, что браузер проанализировал HTML и построил дерево DOM). Это позволяет вам запускать код, как только документ готов к работе.
Например, если браузер поддерживает событие DOMContentLoaded (как это делают многие браузеры, отличные от IE), то это событие сработает. (Обратите внимание, что событие DOMContentLoaded было добавлено только в IE в IE9+.)
Для этого можно использовать два синтаксиса:
$( document ).ready(function() {
console.log( "ready!" );
});
Или сокращенная версия:
$(function() {
console.log( "ready!" );
});
Основные моменты для $(document).ready():
- Он не будет ждать загрузки изображений.
- Используется для выполнения JavaScript, когда DOM полностью загружен. Поместите обработчики событий здесь.
- Можно использовать несколько раз.
- замещать
$сjQueryкогда вы получаете "$ не определено". - Не используется, если вы хотите манипулировать изображениями. использование
$(window).load()вместо.
window.onload() родная функция JavaScript window.onload() Событие возникает, когда весь контент на вашей странице загружен, включая DOM (объектную модель документа), рекламные баннеры и изображения. Другое различие между ними состоит в том, что, хотя мы можем иметь более одного $(document).ready() функция, мы можем иметь только один onload функция.
Небольшой совет:
Всегда используйте window.addEventListener добавить событие в окно. Потому что таким образом вы можете выполнить код в разных обработчиках событий.
Правильный код:
window.addEventListener('load', function () {
alert('Hello!')
})
window.addEventListener('load', function () {
alert('Bye!')
})Неверный код:
window.onload = function () {
alert('Hello!') // it will not work!!!
}
window.onload = function () {
alert('Bye!')
}Это связано с тем, что onload - это просто свойство объекта, которое перезаписывается.
Событие загрузки Windows происходит, когда весь контент на вашей странице полностью загружен, включая контент DOM (объектная модель документа) и асинхронный JavaScript, фреймы и изображения. Вы также можете использовать body onload=. Оба одинаковы; window.onload = function(){} а также <body onload="func();"> разные способы использования одного и того же события.
JQuery $document.ready Событие функции выполняется немного раньше, чем window.onload и вызывается после загрузки DOM (объектной модели документа) на вашу страницу. Он не будет ждать, пока изображения, кадры полностью загрузятся.
Взято из следующей статьи: как $document.ready() отличается от window.onload()
$(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).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;
};
Также я создал изображение ниже как краткий справочник для обоих:
Слово предостережения при использовании $(document).ready() с Internet Explorer. Если HTTP-запрос прерывается до загрузки всего документа (например, во время потоковой передачи страницы в браузер, щелкает другая ссылка) IE запустит $(document).ready событие.
Если какой-либо код в пределах $(document).ready() событие ссылается на объекты DOM, существует вероятность того, что эти объекты не будут найдены, и могут возникнуть ошибки Javascript. Либо защитите ваши ссылки на эти объекты, либо отложите код, который ссылается на эти объекты, на событие window.load.
Я не смог воспроизвести эту проблему в других браузерах (в частности, Chrome и Firefox)
События
$(document).on('ready', handler) привязывается к готовому событию из jQuery. Обработчик вызывается при загрузке DOM. Активы как изображения, возможно, все еще отсутствуют. Он никогда не будет вызван, если документ готов во время привязки. Для этого jQuery использует DOMContentLoaded -Event, эмулируя его, если он недоступен.
$(document).on('load', handler) это событие, которое будет запущено после загрузки всех ресурсов с сервера. Изображения загружены сейчас. В то время как onload является необработанным событием HTML, готовое построено с помощью jQuery.
функции
$(document).ready(handler) на самом деле это обещание. Обработчик будет вызван немедленно, если документ готов во время вызова. В противном случае он связывается с ready -Событие.
До jQuery 1.8, $(document).load(handler) существовал как псевдоним $(document).on('load',handler),
Дальнейшее чтение
window.onload: обычное событие JavaScript.
document.ready: конкретное событие jQuery, когда весь HTML был загружен.
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");
});
Одна вещь, которую нужно помнить (или я должен сказать, вспомнить), что вы не можете сложить onloadкак вы можете с ready, Другими словами, магия JQuery позволяет несколько readyна той же странице, но вы не можете сделать это с onload,
Последний onload отменяет любой предыдущий onloads.
Хороший способ справиться с этим - с помощью функции, написанной, по-видимому, одним Симоном Уиллисоном и описанной в разделе Использование нескольких функций загрузки 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 происходит, когда документ HTML был загружен, и window.onload событие происходит всегда позже, когда весь контент (изображения и т. д.) был загружен.
Вы можете использовать document.ready событие, если вы хотите вмешаться "рано" в процесс рендеринга, не дожидаясь загрузки изображений. Если вам нужны изображения (или любой другой "контент"), прежде чем ваш скрипт "что-то сделает", вам нужно подождать, пока window.onload,
Например, если вы реализуете шаблон "Слайд-шоу" и вам необходимо выполнить расчеты на основе размеров изображения, вы можете подождать, пока window.onload, В противном случае вы можете столкнуться с некоторыми случайными проблемами в зависимости от скорости загрузки изображений. Ваш скрипт будет работать одновременно с потоком, который загружает изображения. Если ваш сценарий достаточно длинный или сервер достаточно быстрый, вы можете не заметить проблему, если изображения появляются вовремя. Но самая безопасная практика - загружать изображения.
document.ready может быть хорошим событием для вас, чтобы показать какой-то знак "загрузка..." пользователям, и после 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;
Время летит незаметно, сейчас ECMAScript 2021, а IE11 все меньше и меньше используется людьми. Два самых противоположных события: а также .
срабатывает после полной загрузки и анализа исходного HTML-документа .
load срабатывает после
DOMContentLoadedи вся страница загружена, ожидая завершения загрузки всех зависимых ресурсов . Пример ресурсов: скрипты, таблицы стилей, изображения и фреймы и т. Д.
ВАЖНО: синхронные скрипты приостанавливают синтаксический анализ DOM.
Оба события могут использоваться для определения того, может DOM использовать или нет. Например:
<script>
// DOM hasn't been completely parsed
document.body; // null
document.addEventListener('DOMContentLoaded', () => {
// Now safely manipulate DOM
document.querySelector('#id');
document.body.appendChild();
});
/**
* Should be used only to detect a fully-loaded page.
*
* If you just want to manipulate DOM safely, `DOMContentLoaded` is better.
*/
window.addEventListener('load', () => {
// Safely manipulate DOM too
document.links;
});
</script>
window.onload это встроенная функция JavaScript window.onload запуск при загрузке HTML-страницы. window.onload может быть написано только один раз.
document.ready является функцией библиотеки jQuery. document.ready срабатывает, когда HTML и весь код JavaScript, CSS и изображения, включенные в файл HTML, полностью загружены.document.ready может быть написано несколько раз в соответствии с требованиями.
Когда ты сказал $(document).ready(f)Вы указываете скриптовому движку сделать следующее:
- возьмите объектный документ и отправьте его, так как он не находится в локальной области видимости, он должен выполнить поиск в хеш-таблице, чтобы найти, где находится документ, к счастью, документ глобально связан, так что это единственный поиск.
- найти объект
$и выберите его, поскольку он не находится в локальной области видимости, он должен выполнить поиск в хэш-таблице, которая может иметь или не иметь коллизии. - найдите объект f в глобальной области видимости, который является другим поиском в хэш-таблице, или нажмите объект функции и инициализируйте его.
- вызов
readyвыбранного объекта, который включает в себя другой поиск хеш-таблицы в выбранном объекте, чтобы найти метод и вызвать его. - сделанный.
В лучшем случае это 2 просмотра хеш-таблицы, но это игнорирует тяжелую работу, проделанную jQuery, где $ это кухонная раковина всех возможных входов в jQuery, так что, скорее всего, другая карта отправит запрос правильному обработчику.
В качестве альтернативы, вы можете сделать это:
window.onload = function() {...}
который будет
- найти объектное окно в глобальной области видимости, если JavaScript оптимизирован, он будет знать, что, поскольку окно не изменилось, у него уже есть выбранный объект, поэтому ничего не нужно делать.
- Объект функции помещается в стек операндов.
- проверить, если
onloadявляется свойством или нет, выполняя поиск в хэш-таблице, поскольку он вызывается как функция.
В лучшем случае это стоит поиск одной хеш-таблицы, что необходимо, потому что onload должен быть доставлен.
В идеале, jQuery должен компилировать свои запросы в строки, которые можно вставить для выполнения того, что вы хотели, чтобы jQuery делал, но без диспетчеризации jQuery во время выполнения. Таким образом, у вас есть возможность либо
- делать динамическую отправку JQuery, как мы делаем сегодня.
- Пусть jQuery скомпилирует ваш запрос в чистую строку JavaScript, которую можно передать в eval, чтобы сделать то, что вы хотите.
- скопируйте результат 2 прямо в ваш код и пропустите стоимость
eval,
Window .onload предоставляется DOM api и говорит, что "событие загрузки срабатывает, когда данный ресурс загружен".
"Событие загрузки возникает в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в модели DOM, а все изображения, сценарии, ссылки и субфреймы загружены". Загрузка DOM
Но в jQuery $(document).ready() будет запускаться только после того, как объектная модель документа (DOM) страницы будет готова для выполнения кода JavaScript. Это не включает изображения, скрипты, фреймы и т. Д. Событие готовности jquery.
Таким образом, метод готовности jquery будет запускаться раньше, чем событие dom onload.
Рассмотрим сценарий, в котором у вас есть два частичных представления внутри страницы индекса
пример
<div id="ReportHere" class="container-fluid">
@Html.Action("ProjectAbc", "ProjectSalesVolume", new { reportType = "Projected Sales Volume", region = "Karachi", sector = "All" })
</div>
@Html.Action("AbcFilters", "ProjectSalesVolume")
Теперь страница действия ProjectAbc имеет скрипт внутри функции window.onload
Пример диаграммы
window.onload = function () {
debugger;
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
text: '@(Model.topTitleChart)'
},
axisY: {
title: '@(Model.leftTitleChart)'
},
data: [{
type: "column",
indexLabel: "{y}",
indexLabelPlacement:"inside",
dataPoints: @Html.Raw(Model.dataPoints)
}]
});
chart.render();
}
и действие имеет тип возвращаемого значения частичное представление.
return PartialView("ProjectAbc", model);
И на странице фильтра снова есть обратный вызов ProjectAbc
пример
@using (Ajax.BeginForm("ProjectAbc", new AjaxOptions { HttpMethod = "Post" }))
{
//property binding here
<input type="submit" value="filter"/>
}
Теперь после загрузки страницы в самый первый раз, когда вы нажимаете фильтр из представления фильтра (который отображается с ProjectAbc на странице индекса), метод внутри window.onload вызываться не будет, поэтому в этом сценарии нам нужен document.ready, потому что window.onload вызывается только один раз при обновлении страницы