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

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

ОТВЕТЫ

Ответ 1

  • document.ready - событие jQuery, оно выполняется, когда DOM готов, например. все элементы должны быть найдены/использованы, но не обязательно все содержимое.
  • window.onload срабатывает позже (или в то же время в случае худших/неудачных случаев), когда изображения и такие загружаются, поэтому, если вы используете размеры изображения, например, вы часто хотите используйте это вместо этого.

Ответ 2

$(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");
});

Ответ 3

Отличие состоит в следующем:

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

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

Ответ 4

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

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

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

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

Ответ 5

<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

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

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

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

$(window).load(function() {
    alert("window is loaded");
});

Ответ 7

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

window.onload vs document.onload

Ответ 8

В соответствии с событиями уровня DOM Level 2 событие загрузки должно запускаться по документу, не на окне. Однако загрузка выполняется в окне во всех браузерах для обратная совместимость.

Ответ 9

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 body, как это (но я настоятельно рекомендую вам избегать смешивания такого кода в 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!");
});

Ответ 10

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

Ответ 12

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