На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Как заменить метод jQuery Ready() помощью простого JavaScript


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

ДО JQuery 3.0 типичное использование анонимной функции выглядит следующим образом:

$(document).ready(function() {
  // .....
});
Изменения в Query 3.0 ready()

До выхода версии 3, было несколько способов, которыми вы могли бы вызвать ready метод:

  • на элемент документа: $(document).ready(handler);
  • на пустой элемент: $().ready(handler);
  • или непосредственно (т.е. не на конкретный элемент): $(handler);
Все названные выше варианты функционально эквивалентны. Указанный обработчик будет вызываться, когда DOM полностью загружен, независимо от того, на какой элемент его вызывали. Другими словами, вызывая его на элемент изображения $("img") по отношению к элементу документа не указывает на то, что функция вызывается, когда указанный элемент загружен. Вместо этого она будет вызываться, когда весь DOM полностью загружен.

В JQuery 3.0, все другие методы синтаксиса, кроме $(handler); являются устаревшими. Официальное оправдание:

Это потому, что выбор не влияет на поведение метода Ready (), который является неэффективным и может привести к неправильным предположениям о поведении метода.
Разница между событиями Ready и Load

Ready событие запускается, когда DOM будет полностью загружен и уже после этого обращается к элементам безопасно. Событие load, с другой стороны, начинает работать после того, как DOM и все активы были загружены.

Событие load можно использовать следующим образом:

$(window).on("load", function(){
  // Обработчик, когда все активы (включая изображения) загружаются
});
Он ждет, пока не только DOM будет готов к взаимодействию, но и изображения, которые должны полностью загрузится (это может занять время, в зависимости от размеров изображений).

Для обычных DOM манипуляций вам обычно не нужно load событие, но это может быть правильный выбор, если вы хотите, например, показать загрузку (прогресс бар).

Вам, наверное, не нужно jQuery.ready()

Ready метод гарантирует, что код выполняется только тогда, когда все элементы DOM безопасны для манипуляций. Но что это значит? Когда вы запускаете выполнение кода JavaScript внутри <head> HTML документа, то можно убедиться, что код выполняется, когда браузер загрузил все следующие элементы (например, элемент) тоже:

<html>
  <head>
    <meta charset="utf-8">
    <title>.ready()</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
      $(function(){ 
        var length = $("p").length;
		 // Следующим будет 1 в консоли, поскольку в этом пункте существует.
        // Это свидетельство того, что этот метод вызывается только тогда, когда DOM полностью загружен
        console.log(length);
      });
   </script>
  </head>
  <body>
    <p>Здесь контент сайта</p>
  </body>
</html>
А вот когда идет выполнение JavaScript в последнюю очередь внутри <body>, то вам не нужно оборачивать в ready() , так как все элементы, которыми вы могли бы попытаться манипулировать, уже загружены:

<html>
  <head>
    <meta charset="utf-8">
    <title>.ready()</title>
  </head>
  <body>
    <p>I'm the content of this website</p>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
      var length = $("p").length;
      // Следующим будет 1 в консоли, поскольку в этом пункте существует.
      console.log(length);
    </script>
  </body>
</html>
Простая JavaScript ready() альтернатива

Для современных браузеров и IE9 и выше, вы можете прослушивать событие DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function(){
  // Обработчик, когда DOM будет полностью загружен 
});
Но, обратите внимание, что обратный вызов не будет выполнен, если событие уже запущено. Чтобы убедиться, что этот метод всегда работает, jQuery проверяет readyState документа если все, то немедленно выполняет обратный вызов:

var callback = function(){
  // Обработчик, когда DOM будет полностью загружен
};

if (
    document.readyState === "complete" ||
    (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
  callback();
} else {
  document.addEventListener("DOMContentLoaded", callback);
}
Это решение, кстати, уже реализовано в библиотеке domReady.

Более старые версии Internet Explorer

Для версий IE меньше или равно 8, вы могли бы использовать событие onreadystatechange для определения readyState документа:

document.attachEvent("onreadystatechange", function(){
  // проверьте, если DOM будет полностью загружен
  if(document.readyState === "complete"){
    // удалить слушателя
    document.detachEvent("onreadystatechange", arguments.callee);
    // Фактический обработчик...
  }
});
В качестве альтернативы можно использовать событие загрузки, как JQuery делает, так как это будет работать в любом браузере. Это также приводит к задержке времени, так как она будет ждать, пока все элементы будут загружены. Обратите внимание, что вы также должны проверить readyState в этом случае, как описано выше, чтобы убедиться, что обратный вызов по-прежнему будет выполняться, даже если событие уже произошло.

Вывод

Если вы ищете простую альтернативу JavaScript для ready метода, то вы можете использовать DOMContentLoaded событию. Если ваши системные требования включают в себя IE <9, то вы можете использовать onreadystatechange событие.

Если вы используете JQuery в вашем проекте вы можете смело приступать с помощью встроенной функции готовности, но помните, чтобы избежать использования ( не рекомендуется) ready() метод на элементы (например , $(document).ready() ), как указано ранее.

И, наконец, не стоит забывать, что во многих ситуациях вам не нужно какое-либо из этих решений - просто поставьте код JavaScript перед закрывающим </body> тега, и вы можете быть уверены, что он будет выполнен по окончании загрузки DOM!




тегистатьи IT, javascript, jQuery, Ready, теория





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Старая, старая сказка…
Как создать WordPress тему из HTML


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.