window.onload vs $ (document) .ready () - PullRequest
Новая
       59

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

1179 голосов
/ 13 сентября 2010

В чем разница между JavaScript window.onload и jQuery $(document).ready() метод?

Ответы [ 15 ]

11 голосов
/ 03 марта 2015

Document.ready (событие jQuery) сработает, когда все элементы на месте, и на них можно ссылаться в коде JavaScript, но содержимое не обязательно загружается Document.ready выполняется при загрузке HTML-документа. 

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

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

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});
10 голосов
/ 08 ноября 2013

Одна вещь, которую нужно запомнить (или я должен вспомнить), это то, что вы не можете складывать onload s, как вы можете с ready. Другими словами, jQuery magic позволяет использовать несколько ready на одной странице, но вы не можете сделать это с помощью onload.

Последний onload отменяет все предыдущие onload с.

Хороший способ справиться с этим - использовать функцию, написанную, по-видимому, одним Саймоном Уиллисоном и описанную в Использование нескольких функций загрузки JavaScript . 

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});
5 голосов
/ 16 мая 2016

Событие document.ready наступает, когда документ HTML был загружен, а событие window.onload наступает всегда позже, когда загружается весь контент (изображения и т. Д.).

Вы можете использовать document.ready событие, если вы хотите вмешаться «на ранних этапах» в процесс рендеринга, не дожидаясь загрузки изображений.Если вам нужно, чтобы изображения (или любой другой «контент») были готовы до того, как ваш скрипт «что-то сделает», вам нужно подождать до window.onload.

Например, если вы реализуете шаблон «Слайд-шоу»и вам нужно выполнить расчеты на основе размеров изображения, вы можете подождать до window.onload.В противном случае вы можете столкнуться с некоторыми случайными проблемами в зависимости от скорости загрузки изображений.Ваш скрипт будет работать одновременно с потоком, который загружает изображения.Если ваш сценарий достаточно длинный или сервер достаточно быстрый, вы можете не заметить проблему, если изображения появляются вовремя.Но самая безопасная практика - разрешить загрузку изображений.

document.ready может быть хорошим событием для вас, чтобы показать пользователям знак "загрузка ...", а после window.onload вы можетезавершите все сценарии, для которых нужны загруженные ресурсы, и, наконец, удалите знак «Загрузка ...».

Примеры: - 

// document ready events
$(document).ready(function(){
     alert("document is ready..");
})

// using JQuery
$(function(){
   alert("document is ready..");
})

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;
2 голосов
/ 24 июня 2014

window.onload - встроенная функция JavaScript. window.onload срабатывает при загрузке HTML-страницы. window.onload может быть записано только один раз.

document.ready является функцией библиотеки jQuery. document.ready срабатывает, когда HTML и весь код JavaScript, CSS и изображения, включенные в файл HTML, полностью загружены. document.ready может быть написано несколько раз в соответствии с требованиями.

1 голос
/ 30 ноября 2017

Когда вы говорите $(document).ready(f), вы указываете скриптовому движку сделать следующее:

  1. получить документ объекта и отправить его, поскольку он не находится в локальной области видимости, он должен выполнить поиск в хэш-таблицечтобы найти, где находится документ, к счастью, документ глобально связан, так что это один поиск.
  2. найдите объект $ и выберите его, поскольку он не находится в локальной области видимости, он должен выполнить поиск в хеш-таблице, чтомогут иметь или не иметь коллизии.
  3. найти объект f в глобальной области видимости, который является другим поиском в хэш-таблице, или выдвинуть объект функции и инициализировать его.
  4. вызов ready выбранного объекта,который включает другой поиск в хеш-таблице в выбранном объекте, чтобы найти метод и вызвать его.
  5. done.

В лучшем случае это 2 поиска в хеш-таблице, но это игнорируетсятяжелая работа, проделанная jQuery, где $ - это кухонная раковина всех возможных входов в jQuery, поэтому, вероятно, существует другая карта для отправки запроса правильному обработчику.

Alternativто есть, вы можете сделать это: 

window.onload = function() {...}

, который

  1. найдет окно объекта в глобальной области видимости, если JavaScript оптимизирован, он будет знать, что, поскольку окно неизменен, у него уже есть выбранный объект, поэтому ничего не нужно делать.
  2. объект функции помещается в стек операндов.
  3. проверяет, является ли onload свойством или нет, выполняяПоиск в хеш-таблице, поскольку он вызывается как функция.

В лучшем случае это требует поиска в одной хеш-таблице, что необходимо, поскольку onload должен быть выбран.

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

  1. делать динамическую отправку jquery, как мы делаем сегодня.
  2. сделайте, чтобы jQuery скомпилировал ваш запрос в чистую строку JavaScript, которую можно передать в eval, чтобы сделать то, что вы хотите.
  3. скопируйте результат 2 прямо в ваш код и пропустите стоимость eval.
Страница:
...