Разница между функциями $ (window) .load () и $ (document) .ready () - PullRequest
Новая
       22

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

189 голосов
/ 03 января 2011

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

Ответы [ 11 ]

235 голосов
/ 03 января 2011
  • document.ready - это событие jQuery, оно запускается, когда DOM готов, например, все элементы находятся там, чтобы их можно было найти / использовать, но не обязательно все содержимое .
  • window.onload срабатывает позже (или одновременно в худшем / неудачном случае), когда загружены images и т. Д., Например, если вы используете размеры изображения, например, вычасто хочу использовать это вместо.
64 голосов
/ 19 ноября 2013 
$(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");
});
12 голосов
/ 05 апреля 2013

Разница:

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

10 голосов
/ 05 сентября 2018

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

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

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

$( window ).on("load", function() {
        // Handler for .load() called.
});
8 голосов
/ 25 ноября 2013 
<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

6 голосов
/ 31 января 2017

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

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

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

$(window).load(function() {
    alert("window is loaded");
});
2 голосов
/ 03 января 2011

С точки зрения jquery - это просто добавление события load / onload к окну и документу. Проверьте это:

window.onload против document.onload

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

$ (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 ().

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

0 голосов
/ 07 февраля 2018

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) ОкноОднако .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 голосов
/ 23 октября 2017

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...