Я интегрирую библиотеку javascript с именем chart.js в страницу php , которую я создаю, и я видел, что в своих примерах они используют функцию
window.onload
вместо этого $(document).ready()
, и возникло сомнение, которое дает имя этому вопросу:
В чем разница между window.onload и $(document).ready()?
Я нашел аналогичный вопрос на английском языке SO, который называется window.onload vs $(document).ready() , но мне это не совсем понятно, так как мой английский не очень хорош.
Я был бы признателен, если бы кто-то мог решить этот вопрос для меня. Ваше здоровье
Разница ясно объяснена jQuery в его англоязычной документации. К сожалению, документации по этой библиотеке на испанском языке немного:
Понятно, разница указана в самом названии каждого метода:
document : когда готов только документ, можно сказать, HTML-часть.
window : когда все окно, документ и все остальное готово.
▸
window.onload()
Событие
onload
, которое является сокращением от ,load
запускается в конце процесса загрузки документа. То есть, когда все DOM-объекты (изображения, flash, скрипты, фреймы) закончили загрузку. Единственным исключением являются таблицы стилей, которые не всегда загружаются во время срабатывания этого события.▸
$(document).ready()
jQuery
document.ready
выполняется, когда весь HTML-контент готов, но перед изображениями и другими ресурсами. В современных браузерах он заменен наDOMContentLoaded
.Важная заметка:
По состоянию на jQuery 3.0
$(document).ready()
он переходит в состояние Deprecated , хотя он еще будет работать, он исчезнет из ядра jQuery в следующей версии библиотеки (версия 4).Руководство по обновлению jQuery 3 (на английском языке, в надежде когда-нибудь получить эту документацию на испанском языке) объясняет следующее:
Примечание: есть плагин для переноса нашего кода из предыдущих библиотек на jQuery 3, для получения дополнительной информации оставляю ссылку здесь .
В итоге
Если мы собираемся работать с элементами, из которых состоит сеть (div, input и т. д.), мы будем использовать
$(document).ready()
. Но если, наоборот, мы собираемся работать с изображениями, чтобы выровнять их или проверить их размеры, то придется использовать$(window).load()
.Это очень распространенная ошибка,
$(window).load()
когда мы собираемся работать только с элементами DOM или$(document).ready()
когда мы собираемся работать с элементами, которые не будут загружены при выполнении указанной функции.Изображение, иллюстрирующее различные элементы окна
тестовый код
Давайте посмотрим, что происходит в этом фрагменте кода, в котором с одной стороны загружаются элементы DOM, а с другой — iframe YouTube. Даже если она минимальна, вы увидите разницу во времени загрузки консоли.
Я буду использовать библиотеку jQuery 3 и
$(function() {...
вместо$( document ).ready(function() {
И кстати, если вам нравится фламенко, не забудьте послушать одну из самых красивых песен этого жанра :)
Есть два основных отличия:
$(document).ready()
это часть библиотеки javascript (jQuery), это не "родной javascript", как в случае с событиемwindow.onload
Событие
onload
запускается, когда страница полностью загружена со всеми вытекающими последствиями (стили, изображения и т. д.), в то время как функция$(document).ready()
доступна до того, как это произойдет, когда дерево DOM документа будет завершено.В любом случае ссылка, которую вы добавили к своему вопросу, хорошо объясняет это.
Окно#загрузить
Это событие запускается после загрузки DOM и завершения синтаксического анализа всего документа. Сюда входят таблицы стилей, сценарии и все типы мультимедийных файлов (изображения, видео, встроенные документы и т. д.).
jQuery # готов
Это пользовательское событие jQuery, которое запускается, когда все дерево DOM загружено и все элементы доступны в DOM (независимо от того, доступны ли ресурсы, на которые они ссылаются). Это событие очень похоже на
document#DOMContentLoaded
.документ#DOMContentLoaded
Он делает в основном то же самое, что и
jQuery#ready
. Это событие запускается изначально, когда DOM готов (независимо от того, на какие ресурсы ссылаются).jQuery#ready
противdocument#DOMContentLoaded
По- видимому
jquery#ready
, это был и есть полифилл дляdocument#DOMContentLoaded
. Имейте в виду, что jQuery появился, когда JavaScript был еще очень ленивым, без функций, которые он имеет сегодня, чтобы упростить задачу.Согласно документации jQuery, в нем говорится следующее:
Согласно jQuery,
DOMContentLoaded
он запускается до того, как браузерjQuery#ready
проанализирует обработчик, поэтому онready
все равно будет выполнен. С другой стороны, если обработчик добавляетсяDOMContentLoaded
после запуска событияready
, он никогда не выполняется.Добавляя к уже существующим ответам, следует также отметить, что события
Window#load
иdocument#DOMContentLoaded
выполняются только один раз. Если вы объявите функцию, зависящую от этого события, и объявление произойдет после того, как они сработают, функция никогда не будет выполняться.С другой стороны,
jQuery#ready
он будет выполнен, когда документ будет готов, и будет выполнен «немедленно», когда документ будет готов заранее.Наконец, в отличие от событий окна и документа
jQuery#ready
, внутри он работает как обещание (поэтому никогда не происходит «немедленно»). Это означает, что код внутри блока$(document).ready()
всегда выполняется асинхронно, независимо от того, был ли он объявлен, когда DOM уже был загружен.Это можно проверить в следующем фрагменте. Блок
$(document).ready()
внутри блока$(document).ready()
, даже зная, что DOM готов, не выполняется последовательно с командами на уровень выше:На практике у вас может быть много блоков,
$(document).ready
не влияющих друг на друга, например, когда один из них выдает ошибку. Вы явно не можете сделать это с событиями окна и документа.Предыдущие ответы очень хороши, просто нужен пример, чтобы прояснить разницу. Здесь один на скрипке
Как только изображение загружено в кеш браузера, разница в загрузке незаметна. Разницу между обеими загрузками можно рассчитать, чтобы узнать время загрузки внешних файлов.