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

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

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

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

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

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

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

Ссылки

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

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

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

Jquery load function windows

Description: Bind an event handler to the "load" JavaScript event.

version added: 1.0 .load( handler )

version added: 1.4.3 .load( [eventData ], handler )

Note: This API has been removed in jQuery 3.0; please use .on( "load", handler ) instead of .load( handler ) and .trigger( "load" ) instead of .load() .

This method is a shortcut for .on( "load", handler ) .

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

For example, consider a page with a simple image:

The event handler can be bound to the image:

As soon as the image has been loaded, the handler is called.

In general, it is not necessary to wait for all images to be fully loaded. If code can be executed earlier, it is usually best to place it in a handler sent to the .ready() method.

The Ajax module also has a method named .load() . Which one is fired depends on the set of arguments passed.

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

• It doesn't work consistently nor reliably cross-browser
• It doesn't fire correctly in WebKit if the image src is set to the same src as before
• It doesn't correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser's cache

Note: The .live() and .delegate() methods cannot be used to detect the load event of an iframe. The load event does not correctly bubble up the parent document and the event.target isn't set by Firefox, IE9 or Chrome, which is required to do event delegation.

Examples:

Run a function when the page is fully loaded including graphics.

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 тег Клик

Jquery load function windows

Загружает данные с сервера (html) и вставляет в указанный элемент.

version added: 1.0 .load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

url

URL адрес запроса.

data

Тип: Объект или Строка

Объект или строка данных, которые будут отправлены.

complete(responseText, textStatus, XMLHttpRequest)

Функция обратного действия, которая запустится после завершения запроса.

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

Если селектора не существует — в нашем случае, если в документе нет блока с — Ajax запрос не будет выполнен.

Функция обратного действия

Если задана функция обратного действия "complete", она будет выполнена формирования и вывода HTML. Она будет запускаться для каждого объекта коллекции jQuery.

Если в документе нет элемента с ID "result," метод .load() не будет выполнен.

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

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

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

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

Мы можем чуть исправить пример, указанный выше, чтобы извлечь только часть документа:

При выполнении, метод извлекает содержимое файла ajax/test.html, но потом jQuery парсит результат и, благодаря селектору, находит тот фрагмент, который нужен. Только это содержание в результате будет вставлено на страницу, всё остальное будет опущено.

Выполнение скрипта

При использовании метода .load() с указанием селектора, контент будет пропущен через метод .html(), таким образом все скрипты будут удалены. При загрузке без селектора, все скрипты будут загружены в соответствии с приоритетом:

В данном примере весь JavaScript, загруженный в элемент #a, как часть документа, будет успешно выполнен.

Однако, в следующем случае, скрипты загруженного документа, прикреплённого к элементу #b не будут выполнены:

Примеры

Пример: загружаем основную навигацию страницы в “подвал”, в виде элементов списка.

Демо:

Пример: отобразить предупреждение, если ajax запрос прошёл неудачно.

Демо:

Пример: Загрузить содержимое feeds.html в специально отведённый для этого div.

Результат:

Пример: передача массив данных на сервер.

Пример: передача данных на сервер методом POST и использование метода обратного действия.

Jquery load function windows

Description: Load data from the server and place the returned HTML into the matched elements.

version added: 1.0 .load( url [, data ] [, complete ] )

Note: Prior to jQuery 3.0, the event handling suite also had a method named .load() . Older versions of jQuery determined which method to fire based on the set of arguments passed to it.

This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched elements to the returned data. This means that most uses of the method can be quite simple:

If no element is matched by the selector — in this case, if the document does not contain an element with — the Ajax request will not be sent.

Callback Function

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

In the two examples above, if the current document does not contain an element with an ID of "result," the .load() method is not executed.

Request Method

The POST method is used if data is provided as an object; otherwise, GET is assumed.

Loading Page Fragments

The .load() method, unlike $.get() , allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

We could modify the example above to use only part of the document that is fetched:

When this method executes, it retrieves the content of ajax/test.html , but then jQuery parses the returned document to find the element with an ID of container . This element, along with its contents, is inserted into the element with an ID of result , and the rest of the retrieved document is discarded.

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

Script Execution

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:

Here, any JavaScript loaded into #a as a part of the document will successfully execute.

However, in the following case, script blocks in the document being loaded into #b are stripped out and not executed:

Additional Notes:

• Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

Examples:

Load another page's list items into an ordered list.