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

Замечание: в некоторых случаях, если картинка содержится в кеше браузера, событие load может не произойти. Для такого случая можно воспользоваться специальным событием event.special.load, которое определено в небольшом плагине.

Замечание 2: если вам не требуется готовность мультимедийных файлов, лучше воспользоваться методом .ready(), который устанавливает обработчик готовности структуры документа, что происходит раньше начала загрузки файлов мультимедиа.

Примеры использования

Для страницы, содержащей картинку

следующий код позволит обработать ее загрузку:

А вот так можно обработать готовность всей страницы:

Ссылки

От автора jquery.page2page.ru

Мини-игра про поход за продуктами во время карантина.

Твой уникальный шанс напинать короновирусу буквально.

$(document).ready vs $(window).load vs window.onload

Данный материал является вольным переводом статьи:
RITURAJ RATAN $(document).ready vs $(window).load vs window.onload

Длительное время мы использовали '$(document).ready' работая с jQuery. Написанный таким образом код начнёт выполняться сразу после того, как будет готов DOM, за исключением картинок. Указанный код будет выполняться непосредственно после готовности DOM, не дожидаясь полной загрузки изображений. Вызов $(document).ready несколько раз приведет к последовательному исполнению вызовов друг за другом. Существуют ещё несколько вариантов записи.

Если мы говорим о $(window).load то код, написанный внутри такой конструкции, начнёт работу когда будет готов весь DOM включая изображения. Такой вызов подойдёт если мы хотим работать с изображениями (расчёт размеров изображения). Данный вызов, как и предыдущий является jQuery событием. Если на нашей странице есть изображения, то сначала мы дождёмся загрузки их всех, а потом будет вызван код.

И ещё кое-что, не путайте событие window load с jQuery методом ajax load.

Событие onload является стандартным событием в DOM, а описанные выше решения работают только при наличии библиотеки jQuery. Данный вариант имеет такую же функциональность как $(window).load , но является встроенным JavaScript событием. Событие onload происходит, когда объект был загружен. Мы можем сделать такой вызов непосредственно из тега. Например, разместив его в теге изображения и как только оно будет загружено произойдёт вызов события.

Такой вызов возможен как в HTML так и в JS.

Alert “вызов после загрузки body” будет вызван сразу после того как загрузится body

Если рассмотреть пример работы onload после загрузки изображения, то выглядеть все будет как показано ниже

jQuery метод .load()

Определение и применение

jQuery метод .load() позволяет загрузить данные с сервера и разместить, возвращенный HTML код внутри необходимых элементов.

Обращаю Ваше внимание, что до версии jQuery 3.0 существовал одноименный обработчик события .load(), который передается на элемент, когда он и все вложенные элементы были полностью загружены. Старые версии jQuery определяют какой метод вызвать в зависимости от набора параметров, переданных методу. Обработчик события .load() был удален в версии jQuery 3.0.

jQuery синтаксис:

Метод .load() является самым простым способом для получения данных с сервера, он эквивалентен $.get( url, data, success ) , за исключением того, что он является методом, а не глобальной функцией и имеет неявную функцию обратного вызова. При обнаружении успешного ответа от сервера (когда свойство textStatus имеет значение " success ", или " notmodified "), метод .load() задает возвращаемые от сервера данные (HTML содержимое) соответствующему элементу, или элементам. Метод .load() имеет только один обязательный параметр, что делает его достаточно простым и удобным в использовании:

Обратите внимание, что если ни один элемент в документе не соответствует заданному селектору, то AJAX запрос не будет отправлен.

Метод запроса

Если данные, отправляются в виде объекта, то используется HTTP запрос методом POST, в противном случае, используется HTTP запрос методом GET.

Загрузка фрагмента страницы

Метод .load(), в отличии от функции $.get() , позволяет определить часть удаленного документа, который должен быть вставлен. Это достигается с помощью специального синтаксиса, используемого в параметре url:

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

Библиотека jQuery использует свойство браузера .innerHTML для разбора полученного документа и вставки его в текущий документ. Во время этого процесса, браузеры часто фильтруют такие элементы как , , и . Учтите, что в результате этого, отображение элементов, полученных с использованием метода .load() может отличаться от того, если документ был получен (открыт) непосредственно в браузере.

Выполнение cкриптов

Когда метод .load() используется для загрузки фрагмента страницы (в парметре url указан селектор), то в этом случае все скрипты (HTML тег Клик

why $(window).load() is not working in jQuery?

I'm learning jQuery using visual studio and testing my code in Chrome browser. This is my HTML code

This is my solution explorer

Now why my browser doesn't alert "window Loaded"?

4 Answers 4

You're using jQuery version 3.1.0 and the load event is deprecated for use since jQuery version 1.8. The load event is removed from jQuery 3.0. Instead you can use on method and bind the JavaScript load event:

I have to write a whole answer separately since it's hard to add a comment so long to the second answer.

I'm sorry to say this, but the second answer above doesn't work right.

The following three scenarios will show my point:

Scenario 1: Before the following way was deprecated,

if we execute the following two queries:

the alert (Dom Loaded.) from the second query will show first, and the one (Window Loaded.) from the first query will show later, which is the way it should be.

Scenario 2: But if we execute the following two queries like the second answer above suggests:

the alert (Window Loaded.) from the first query will show first, and the one (Dom Loaded.) from the second query will show later, which is NOT right.

Scenario 3: On the other hand, if we execute the following two queries, we'll get the correct result:

that is to say, the alert (Dom Loaded.) from the second query will show first, and the one (Window Loaded.) from the first query will show later, which is the RIGHT result.

In short, the FIRST answer is the CORRECT one:

Обработчик события load

Материал из JQuery

Устанавливает функцию handler в качестве обработчика события load, на выбранные элементы.
Метод является аналогом bind("load", handler(eventObject)).

handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.

Метод отличается от предыдущего возможностью передавать в обработчик дополнительные данные.
Является аналогом bind("load", eventData, handler(eventObject)).

handler(eventObject) — см. выше.
eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: .