Меняем jQuery Ready() на чистый JavaScript

Время идёт и меняется подход к различным вещам. С развитием JavaScript и выходом новых библиотек привычные вещи, такие как вызов $(document).ready(function(){}); становятся неактуальны.

Вам не нужен jQuery.ready()

Метод ready — залог того что весь DOM загружен. Если вы выполняете JS код перед закрытием тега <body>, то весь DOM уже загружен. В вызове jQuery.ready() нет необходимости:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>.ready() tutorial</title>
  </head>
  <body>
    <p>I'm the content of this website</p>
    <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script>
      var length = $("p").length;
      // The following will log 1 to the console, as the paragraph exists.
      console.log(length);
    </script>
  </body>
</html>

Альтернатива на чистом JS

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

document.addEventListener("DOMContentLoaded", function(){
  // Handler when the DOM is fully loaded
});

Если же событие уже отработало, то колбэк не выстрелит. Чтобы точно отследить это событие можно понаблюдать за значением readyState документа и если оно равно complete, то вызвать колбэк:

var callback = function(){
  // ...
};

if (
    document.readyState === "complete" ||
    (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
  callback();
} else {
  document.addEventListener("DOMContentLoaded", callback);
}

Старые версии Internet Explorer

Чтобы однозначно определить readyState в старых версиях IE можно воспользоваться событием onreadystatechange:

document.attachEvent("onreadystatechange", function(){
  if(document.readyState === "complete"){
    document.detachEvent("onreadystatechange", arguments.callee);
  }
});

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Станислав Протасевич
Урок создан: 23 Апреля 2017
Просмотров: 12971
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^