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

В последнее время у меня возникла проблема с моим JavaScript-кодом и извлечение части моего кода из моего $(document).ready() и помещение его в $(window).load() исправлено.

Теперь я понимаю, что window.load запускается сразу после document.ready, но почему он не готов после document.ready, то есть после window.load()?

Ответ 1

load вызывается, когда все активы загружаются, включая изображения. ready запускается, когда DOM готов к взаимодействию.

Из MDC window.onload:

Событие загрузки запускается в конце процесс загрузки документа. В этот точки, все объекты в документ находятся в DOM, и все изображения и подкадры завершены загрузки.

В документации API jQuery . ready (обработчик):

Пока JavaScript предоставляет нагрузку событие для выполнения кода, когда страница, это событие не получается срабатывает до тех пор, пока все активы, такие как изображения были полностью получены. В большинстве случаев может выполняться scriptкак только иерархия DOM полностью построенный. Обработчик прошел toready() гарантированно будет выполняется после того, как DOM готов, поэтому это, как правило, лучшее место для присоединить все другие обработчики событий и запустить другой код jQuery. Когда используешь скрипты, которые полагаются на значение CSS свойства стиля, важно ссылки на внешние таблицы стилей или вставлять элементы стиля до ссылаясь на сценарии.

Ответ 2

$(document).ready() означает, что DOM вашей страницы готов к работе.

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

Чего вы пытаетесь достичь?

Ответ 3

$(document).ready(function(){
//code here
});

Приведенный выше код используется почти каждый раз, когда мы работаем с jQuery.

Этот код используется, когда мы хотим инициализировать наши коды jQuery после готовности DOM.

$(window).load()

Иногда вы хотите манипулировать изображениями. Например, вы хотите вертикально и горизонтально выровнять изображение, и для этого вам нужно получить ширину и высоту изображения. С $(document).ready() вы не сможете это сделать, если посетитель не загрузил изображение, и в этом случае вам нужно инициализировать функцию выравнивания jQuery, когда изображение закончит загрузку. То, где мы используем $(window).load()

Ответ 4

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

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

Это основное отличие.

Ответ 5

$(document).ready() - обертка DOM в <body>...</body>

$(window).load() является папой документа, завершающим все DOM в <html>...</html>

Позвольте использовать в вашем случае для сохранения обработки обработки.

Ответ 6

Состояние загрузки - это состояние, когда объект окна был создан, и все необходимые компоненты, включая DOM, были загружены в память, но не были переданы механизму рендеринга для отображения того же самого на странице.

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

Ответ 7

Простыми словами, window.load вызывается, когда загружается все содержимое окна, тогда как document.ready вызывается, когда DOM загружается и структура документа готова.

Ответ 8

$(document).ready - слайдер быстро в сравнении $(window).load Event.
$(document).ready - это огонь, когда Dom загружен, но $(window).load Event когда Dom, css и изображения полностью загружены.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>   
  <script  src="https://code.jquery.com/jquery-1.12.4.js" ></script>
    <script> 
        $(window).load(function () {          
            var img = $('#img1');
      alert( "Image Height = " + img.height() + "<br>Image Width = " + img.width());          
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">     
    <div>
        <img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
    </div>
    </form>
</body>
</html>

Ответ 9

$(document).ready - событие jQuery. Он запускается, как только DOM загружается и готов к работе с помощью script. Это самая ранняя точка процесса загрузки страницы, где script может безопасно обращаться к элементам на странице html DOM. Это событие запускается до того, как все изображения, css и т.д. Будут полностью загружены.