окно загрузки внутри документа готово?

Question

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

Проще, можно ли использовать $(window).load.(function() {}) ВНУТРИ $(document).ready.(function() {})?

У меня есть кое-что, что нужно сделать после загрузки DOM, но я хочу раскрыть некоторые элементы только после того, как загрузка изображений закончилась.Единственное, что работает в Explorer 8, это помещает функции $(window).load в $(document).ready вместе со всем остальным.

Это приемлемая практика?

Я просто хочу использоватьНаиболее приемлемый метод для обнаружения DIV, который содержит маленькие изображения, такие как панель инструментов, после того, как он полностью построен.(visibility hidden против display none, например).HTML-код для этого DIV записывается кодом внутри $(document).ready, а затем добавляется к телу с помощью $('body').append() перед использованием $(window).load.

У меня много проблем с Explorer 8.

Answer 1

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

Answer 2

РЕДАКТИРОВАТЬ:

ПРИМЕЧАНИЕ. Этот ответ применим только к jQuery v2 и ниже.

---

jQuery .ready() событие :

Обработчик, переданный .ready(), гарантированно будет выполнен после того, как DOM готов , так что обычно это лучшее место для подключения всех других обработчиков событий и запуска другого кода jQuery.

jQuery .load() событие метод :

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

На основании приведенной выше документации jQuery я не видел ничего, что указывало бы налюбые проблемы, связанные со следующим:

$(document).ready(function () {
    // will fire IMMEDIATELY after the DOM is constructed

    $(window).load(function() {
        // will only fire AFTER all pages assets have loaded
    })

});

Размещение .load внутри ready просто гарантирует, что DOM готов, когда срабатывает load.

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

В конечном итоге это может быть скорее вопросом личных предпочтений, однако ОП явно былспрашивая, если эта договоренность вызовет проблемы.Это не подтвердилось.

Answer 3

Я недавно столкнулся с этой проблемой ... из jQuery версии 3 мы больше не можем помещать $ (window) .on ('load') в document.ready () ... потому что готово обработчик вызывается асинхронно, что означает, что ready может вызываться после загрузки.

От jQuery Core Team : Github: jQuery 3 номера

Чтобы было ясно, мы понимаем, что вызывает это. Мы недавно подготовили обработчики стреляют асинхронно. Это имеет преимущества, которые трудно сдаваться. Недостатком является то, что готовый обработчик может иногда запускать после события загрузки, если событие загрузки срабатывает достаточно быстро. Сторона Эффект, который вы видите в этом выпуске, заключается в том, что вы связываете событие загрузки обработчик после того, как событие загрузки уже запущено.

Исправление заключается в том, чтобы связать нагрузку вне готовности.

Вот как должны называться два метода:

$(function() {
  // Things that need to happen when the document is ready
});

$(window).on("load", function() {
  // Things that need to happen after full load
});

Answer 4

ПРЕДУПРЕЖДЕНИЕ : ответы на этот вопрос довольно устарели.

Как упомянуто в комментариях @ViRuSTriNiTy, этот код больше не действует в jQuery 3 и упоминается как проблема в GitHub .

Так что этот метод больше не рекомендуется.

Один из способов сделать это - использовать следующий код

$(window).on("load", function(){
   $.ready.then(function(){
      // Both ready and loaded
   });
})

Однакоэтот код не будет работать, если вы загружаете изображения в состояние готовности и хотите вызвать некоторый код после его полной загрузки.