Когда запускается window.onload

Question

Когда запускается window.onload

Я немного сбит с толку относительно того, когда происходит событие window.onload. Например: у меня есть страница, на которой много внешних js-файлов и даже загрузка скрипта по требованию (динамическое создание тега). Весь этот код находится на странице (т. Е. Он не срабатывает при щелчке или чтении, он должен выполняться при загрузке). Теперь давайте скажем, что у меня есть window.onload = somefunction() в последнем JavaScript по требованию. Возможно ли, что window.onload сработает до того, как все скрипты будут загружены?

33

javascript

Источник

user422778 19 авг '10 в 10:21

2 ответа

Другие вопросы по тегам javascript

user34088 19 авг '10 в 10:24 2010-08-19 10:24 · Answer 1 · 2010-08-19 10:24

window.onload (ака body.onload) запускается после того, как основной HTML, все CSS, все изображения и все другие ресурсы были загружены и обработаны. Так что, если ваши изображения останавливаются, это может занять некоторое время.

Если вам просто нужен HTML (DOM), вы можете использовать jQuery's $(document).ready() - он сработает, когда HTML будет проанализирован, но до того, как браузер закончит загрузку всех внешних ресурсов (изображений и таблиц стилей, которые идут после элемента скрипта в HTML).

Сценарии, встроенные в страницу, выполняются, когда браузер анализирует </script> каждого. Таким образом, чтобы выполнить скрипт перед любым другим скриптом, добавьте <script> тег в шапке сразу после <head>,

Это означает, что вы можете "подражать" window.onload добавив <script> тег как последний элемент <body>,

user94197 19 авг '10 в 10:24 2010-08-19 10:24 · Answer 2 · 2010-08-19 10:24

~~Нет. Window.onload() вызывается, когда все ресурсы (документ, объекты, изображения, CSS и т. Д.) Закончили рендеринг.~~

Неправильно прочитанный вопрос. Да, вполне возможно, что событие window.onload сработает до того, как динамически добавленный скрипт завершит загрузку. Сценарии, добавленные с использованием DOM (document.createElement ()), загружаются асинхронно и не подпадают под действие обычного правила, согласно которому window.onload() ожидает, пока все ресурсы завершат первую загрузку.

Я создал тестовый набор для вас, http://jsfiddle.net/ywSMW/. Этот сценарий добавляет сценарий jQuery в DOM динамически и записывает значение $ на консоль во время обработчика загрузки. Затем снова записывает значение через секунду. Даже при кэшировании скрипта первая запись в консоль возвращает неопределенное значение, что означает, что onload даже сработал до того, как скрипт jQuery был загружен и проанализирован.

Проверено в IE и Chrome.

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

var windowHasLoaded = false;

window.onload = function () {
    windowHasLoaded = true;
}

function doSomethingWhenWindowHasLoaded() {
    if (!windowHasLoaded) {
        // onload event hasn't fired yet, wait 100ms and check again 
        window.setTimeout(doSomethingWhenWindowHasLoaded, 100);
    } else {
        // onload event has already fired, so we can continue
    }        
}