Разница между функциями $ (window) .load () и $ (document) .ready ()

216

В чем разница между $(window).load(function() {})и $(document).ready(function() {})в jQuery?

jquery Satya
источник

Ответы:

266
  • document.readyявляется событием jQuery, оно запускается, когда DOM готов, например, все элементы должны быть найдены / использованы, но не обязательно весь контент .
  • window.onloadСрабатывает позже (или одновременно в худшем / неудачном случае), когда изображения и тому подобное загружаются, поэтому, если вы используете, например, размеры изображения, вам часто нужно использовать это вместо этого.
Ник Крейвер
источник
38
Сокращение для $(document).ready(function(){})is $(function(){})и еще одно важное отличие от window.load заключается в том, что он будет работать на ВСЕХ будущих вызовах функции, даже после первоначального DOMready.
Майкл Батлер
2
@dbliss Да, я считаю, что для onload это сокращение $(window).on('load'). Оба ссылаются на событие загрузки .
Свободный Лансер
5
@MichaelButler - Что ты имеешь в виду it will run on ALL future calls of the function?
BornToCode
7
@MichaelButler: Вы должны быть более четкими в своем комментарии. 1) Вы говорите о том, что ПОЛЬЗОВАТЕЛЬ выполняет больше $(document).readyкода после того, как DOM будет готов. Это такой маленький случай использования, что, вероятно, не стоит путать всех с упоминанием этого. 2) ОКРУЖАЮЩАЯ СРЕДА только $(document).ready(f‌​unction(){})один раз, когда DOM готов. Если пользователь по какой-то причине выполняет больше $(document).readyпосле того, как DOM готов, то да, он будет выполнен немедленно.
Дуг С
4
Я позволю себе не согласиться, Майкл. Давайте просто оставим это на этом и не превращаемся в бесполезные комментарии. По крайней мере, у растерянных людей теперь есть свой ответ.
Дуг С
73 
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});
SagarPPanchal
источник
22

$(window).load()НЕ доступен в JQuery 3.0

$( window ).load(function() {
        // Handler for .load() called.
});

Чтобы обойти это, вы можете использовать его как «Приложение-обработчик событий» 

$( window ).on("load", function() {
        // Handler for .load() called.
});
Кин Амарал
источник
14

Разница:

$(document).ready(function() { является событием jQuery, которое вызывается при загрузке DOM, поэтому оно запускается, когда структура документа готова.

$(window).load() событие запускается после загрузки всего содержимого.

Бхарат Ходвадия
источник
9 
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

window.load будет запущен после загрузки всего содержимого iframe

Шайк Расул
источник
7

$(document).ready происходит, когда все элементы присутствуют в DOM, но не обязательно весь контент.

$(document).ready(function() {
    alert("document is ready");
});

window.onloadили $(window).load()происходит после того, как все ресурсы контента (изображения и т. д.) были загружены.

$(window).load(function() {
    alert("window is loaded");
});
Пурвик Дхораджия
источник
0

document.ready (jQuery) document.ready будет выполняться сразу после того, как свойство HTML-документа загружено, и DOM будет готов.

DOM: объектная модель документа (DOM) - это кроссплатформенное и независимое от языка соглашение для представления и взаимодействия с объектами в документах HTML, XHTML и XML.

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load (встроенный JavaScript) Window.load, однако, будет ожидать полной загрузки страницы, включая внутренние фреймы, изображения и т. д. * window.load - это встроенный метод JavaScript, который, как известно, имеет некоторые причуды в старых браузерах (IE6, IE8, старых версиях FF и Opera), но, как правило, работают во всех из них.

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

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});
Арун Кумар
источник
0

$ (window) .load - это событие, которое запускается, когда DOM и весь контент (все) на странице полностью загружаются, например, CSS, изображения и фреймы. Один из лучших примеров - если мы хотим получить фактический размер изображения или узнать подробности всего, что мы используем.

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

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$ (window) .load запускается после $ (document) .ready ().

$ (window) .load устарела в 1.8 и удалена в jquery 3.0

Srikrushna
источник
0

Я думаю, что $(window).loadсобытие не поддерживается JQuery 3.x

user8816619
источник
1
Согласно документации, событие $ (window) .load было удалено в JQuery 3.0
Матье ВИАЛЕС
1
Это верно. Чтобы обойти это, вы можете использовать его как «Приложение-обработчик событий»: $ (window) .on («load», function () {// Обработчик для .load () вызывают.});
Кин Амарал
0

Согласно DOM Level 2 Events, loadсобытие должно быть включено document, а не включено window. Однако loadреализован windowво всех браузерах для обратной совместимости.

Джонс Агьеманг
источник