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

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


javascript jquery onload
person Venkat    schedule 09.12.2010    source источник
comment
хорошее обсуждение здесь от самого SO stackoverflow.com/questions/3474037/ stackoverflow.com/questions/191157/window-onload-vs-body-onload   -  person kobe    schedule 09.12.2010

Ответы (6)


arrow_upward
72
arrow_downward

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

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

person Lee    schedule 09.12.2010
comment
если объяснение Ли вам недостаточно ясно, взгляните на это определение: codedigest.com/FAQ/ - person angry kiwi; 16.04.2011
comment
Может ли кто-нибудь включить один сценарий, когда нужно использовать load, а когда document.ready? - person Unbreakable; 03.12.2016
comment
@Unbreakable - если вашему скрипту нужно только манипулировать элементами (динамически добавлять элементы в div, устанавливать прослушиватели событий и т. Д.), Вы можете сделать это в document.ready, который запускается, как только DOM полностью загруженный. Если вы хотите делать что-то, что влияет на изображения (например, производить вычисления для .width () и .height () и т. Д.) И других вторичных ресурсов, вам следует использовать window.onload. И обратите внимание на ответ Бхану Пракаша Панди о том, что у вас может быть только одна загрузка (где вам нужно будет разместить все, что вам нужно), но у вас может быть несколько вызовов document.ready на одной странице. - person Dan Barron; 08.02.2017
comment
@Unbreakable и для будущей аудитории, если вы работаете с изображениями или видео шириной или высотой, вам нужно использовать window.onload, иначе это очень просто, просто используйте document.ready. Если вам нужна дополнительная информация, вы можете прочитать эту статью: ссылка - person Aamerallous; 22.02.2021

arrow_upward
19
arrow_downward

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

  1. Событие Body.Onload () будет вызываться только после загрузки DOM и связанных ресурсов, таких как изображения, но событие jQuery document.ready () будет вызываться после загрузки DOM, т.е. он не будет ждать загрузки ресурсов, таких как изображения. . Следовательно, функции в событии готовности jQuery будут выполняться после загрузки структуры HTML, не дожидаясь ресурсов.
  2. У нас может быть несколько document.ready () на странице, но не может быть событие Body.Onload ().
person Bhanu Prakash Pandey    schedule 09.12.2010
comment
Может ли кто-нибудь включить один сценарий, когда следует использовать load, а когда - document.ready? - person Unbreakable; 03.12.2016

arrow_upward
2
arrow_downward

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

person user5755278    schedule 07.01.2016

arrow_upward
1
arrow_downward

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

person sridiva    schedule 13.07.2014

arrow_upward
0
arrow_downward

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

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

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

person Daniele Petrarolo    schedule 07.06.2017

arrow_upward
0
arrow_downward

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

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

.

Пример (нагрузка кузова):

<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>

Ex3 ($ .ready):

<script type = "text/javascript">
        $(document).ready(function() {
            alert("$(document).ready fired");
        });
    </script>
person Srikrushna    schedule 14.06.2018