Разница между onload () и $ .ready? - PullRequest
Новая
       1

Разница между onload () и $ .ready?

51 голосов
/ 09 декабря 2010

Можете ли вы перечислить разницу между функциями onload() и $(document).ready(function(){..}) при использовании jQuery?

Ответы [ 6 ]

71 голосов
/ 09 декабря 2010

событие load (также называемое «onload») в окне и / или элементе тела будет запускаться один раз все содержимое страницы было загружено - это включает в себя все изображения, сценарии и т. Д.... все.

Напротив, функция jquery $(document).ready(...) будет использовать механизм, специфичный для браузера, чтобы гарантировать, что ваш обработчик будет вызван как можно скорее после загрузки и доступа к HTML / XML dom.Это самая ранняя точка в процессе загрузки страницы, где вы можете безопасно запустить скрипт, который намеревается получить доступ к элементам в html dom страницы.Эта точка наступает раньше (часто намного раньше), чем последнее load событие, из-за дополнительного времени, необходимого для загрузки вторичных ресурсов (например, изображений и т. П.).

19 голосов
/ 09 декабря 2010

Основные различия между ними:

  1. Событие Body.Onload () будет вызываться только после загрузки DOM и связанных ресурсов, таких как изображения, но событие document.ready () jQuery будет вызываться после загрузки DOM, т. Е. Оно не будет ожидать ресурсов, таких как изображения. чтобы загрузить. Следовательно, функции в событии ready jQuery будут выполняться после загрузки структуры HTML без ожидания ресурсов.
  2. У нас может быть несколько document.ready () на странице, но событие Body.Onload () не может.
2 голосов
/ 07 января 2016

Функция Document.ready () срабатывает, как только загружается HTML DOM. Но функция onload () сработает после HTML DOM, все содержимое тела будет загружено, как изображения.

1 голос
/ 13 июля 2014

body.onload () заботится как о структуре HTML, так и о связанных ресурсах, тогда как document.ready () заботится только о структуре HTML.

0 голосов
/ 14 июня 2018

onload () срабатывает, когда весь контент (все) на целевом элементе полностью загружен, как CSS, изображения и т. Д.

$. Ready указывает, что код в нем должен быть выполнен, как только содержимое целевых элементов загружено и готово для манипулирования скриптом. Он не будет ждать загрузки изображений для выполнения сценария jQuery. 

.

Ex (нагрузка на кузов): 

<body onload="loadBody()">

<script>
function myFunction() {
    alert("Page is loaded");
}
</script>
</body

Ex (загрузка элемента): 

<img src="w3html.gif" onload="loadImg()" width="100" height="132">

<script>
function loadImg() {
    alert("Image is loaded");
}
</script>

Пример 3 ($ .ready): 

<script type = "text/javascript">
        $(document).ready(function() {
            alert("$(document).ready fired");
        });
    </script>
0 голосов
/ 07 июня 2017

Onload заботится о DOM и ресурсах: он проверяет, загружены ли изображения, готов ли скрипт к запуску и многое другое.

$. Ready просто проверяет, полностью ли прочитали DOM страницы.

Пожалуйста, проверьте эту ссылку для более подробного объяснения и примера: http://dailygit.com/difference-between-document-ready-and-window-load-in-jquery/

...