Блог

мне нужно более подробно узнать, в чем разница между загрузкой страниц, загрузкой и $ (document).ready()

Я нашел ответ, но это мне не совсем понятно. ответ такой

Событие ready происходит после загрузки HTML-документа, в то время как событие onload происходит позже, когда все содержимое (например, изображения) также загружено.

Событие onload является стандартным событием в DOM, в то время как событие ready специфично для jQuery. Цель события ready заключается в том, что оно должно произойти как можно раньше после загрузки документа, чтобы коду, который добавляет функциональность элементам страницы, не приходилось ждать загрузки всего содержимого.

человек пытается сказать, что событие ready происходит после загрузки HTML-документа, а событие onload происходит после загрузки всех элементов страницы, таких как изображение и т. Д.

Итак, что такое загрузка HTML-документа? Я знаю, что загрузка HTML-документа означает, что загрузка всех элементов страницы завершена.

Что означает, что dom готов или загружен? В чем разница между загрузкой HTML-документа и загрузкой dom? Пожалуйста, объясните мне на примере. Спасибо

Я не знаю, что вы подразумеваете под загрузкой страниц, но вот некоторая информация об onload и $(document).ready() .

window.onload срабатывает, когда все на странице завершило загрузку. Это означает, что загружается не только весь DOM, но и все связанные ресурсы, такие как изображения, загружаются полностью. Поскольку это ожидает завершения загрузки изображений, иногда для запуска может потребоваться много времени window.onload . Если вам действительно не нужно ждать, пока изображения не закончат загрузку, вы обычно не хотите ждать так долго, чтобы запустить свой javascript, который изменяет страницу или подключает обработчики событий и т.д…

$(document).ready() это специфичное для jQuery событие, которое запускается, как только DOM готов к манипулированию, но потенциально задолго до завершения загрузки изображений. Это происходит после того, как все объекты, присутствующие на странице HTML, были проанализированы и инициализированы браузером и после загрузки всех скриптов на странице. В момент этого события можно безопасно изменять DOM во всех браузерах. Это даже может произойти немного раньше или позже в некоторых браузерах, поскольку механизм определения безопасной загрузки DOM варьируется в зависимости от старых и новых браузеров.

Реализация jQuery 1.6.x для $(document).ready() использует ряд различных механизмов обнаружения, когда DOM готов. Предпочтительный метод — это когда DOMContentLoaded событие запускается для объекта document. Но это событие поддерживается только некоторыми браузерами, поэтому у него есть резервные механизмы для других браузеров.

Оба эти события будут запускаться только один раз на страницу.

Давайте проведем аналогию, чтобы сравнить процесс загрузки веб-страницы с шеф-поваром с рецептом:

Сначала шеф-повар (браузер) читает весь рецепт (загружает HTML-документ), чтобы убедиться, что он понимает шаги (HTML-код) и что он знает, какие ингредиенты (изображения), посуда (таблицы стилей) и приборы (внешние скрипты) ему понадобятся на его кухне(кэш браузера).

Продолжая читать, шеф-повар отправляет своего помощника в кладовую за ингредиентами, посудой и приборами (остальные файлы загружаются с сервера). Когда он заканчивает читать рецепт ( $(document).ready() ), он начинает выполнять шаги (отображать страницу), но иногда он доходит до шага, прежде чем его помощник возвращается с необходимыми материалами для завершения этого шага. Тем не менее, он довольно опытный, поэтому он все еще может выполнить последующие шаги, пока он ждет. (Аналогия здесь немного прерывается, но в основном: браузер размещает страницу так хорошо, как только может, на основе HTML; когда вы видите загрузку страницы, а затем шрифты или макет меняются через пару секунд, потому что он, наконец, получил таблицу стилей… только представьте, что этот повар каким-то образом может добавить яйца в пирог, который уже в духовке.)

Только после того, как помощник шеф-повара вернет все, что указано в рецепте, на кухню (браузер загрузил все содержимое), шеф-повар может выложить готовое блюдо на тарелку и украсить его (запустите код onload события).

Событие onload является стандартным событием в DOM, в то время как событие ready специфично для jQuery.

DOM — это объектная модель документа, базовый компонент обычного JavaScript. Это означает, что все современные веб-браузеры уже знают, что onload означает.

jQuery — это широко используемая библиотека JavaScript. Для правильного использования вашего скрипта $(document).ready() вам придется ссылаться на копию библиотеки jQuery. Браузеры не знают, что $(document).ready() значит без jQuery.