В чем разница между $ (window) .load и $ (document) .ready? - PullRequest
Новая
       4

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

67 голосов
/ 03 марта 2011

В последнее время у меня возникла проблема с моим JavaScript-КОДОМ, и я вынул часть моего кода из моего $(document).ready() и поместил его в $(window).load(), исправил проблему.

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

Ответы [ 9 ]

73 голосов
/ 03 марта 2011

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

Из MDC, window.onload :

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

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

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

26 голосов
/ 03 марта 2011

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

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

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

8 голосов
/ 03 марта 2011 
$(document).ready(function(){
//code here
});

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

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

$(window).load()

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

6 голосов
/ 05 апреля 2013

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

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

Это большая разница.

4 голосов
/ 16 января 2015

$(document).ready() это DOM в <body>...</body>

$(window).load() - папа документа, заключающего все DOM в <html>...</html>

Давайте использовать в вашем случае, чтобы сохранить обработку рендера.

2 голосов
/ 17 января 2017

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

1 голос
/ 08 октября 2017

  1. $ (document) .ready - быстрый слайдер в сравнении $ (window) .load Событие.

  2. $ (document) .ready срабатывает, когда Dom загружается, но событие $ (window) .load срабатывает при полной загрузке 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>
1 голос
/ 25 июля 2016

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

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

0 голосов
/ 22 декабря 2017

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

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

...