Меняем 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
Просмотров: 1266
Правила перепечатки


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

  • AJAX и PHP: загрузка файла

    Пример того как осуществить загрузку файла через PHP и jQuery ajax.

  • CardInfo.js — отображение банковской карты

    CardInfo.js позволяет по номеру карты получить логотип банка, фирменные цвета и прочие детали. В базе сейчас 49 самых популярных российских банков. Вскоре будут добавлены банки США, Канады, Англии, Австралии и Новой Зеландии.

  • Работа с Chart.js: Первое знакомство

    Chart.js — это популярный инструмент, который предназначен для создания графиков и диаграмм. В данной серии уроков будут раскрыты все аспекты работы с этой библиотекой.

  • Pointer Events API: обработка тач-событий

    С каждым днём трафик со смартфонов и планшетов неумолимо растёт. К счастью на горизонте показалось новое API, которое обеспечивает как работу мыши, так и тач событий, а также взаимодействия со стилусом.

  • Создание фейкового REST API с помощью json-server-а

    В этом уроке, с помощью json-server-а вы научитесь создавать и взаимодействовать с фейковым REST API, который будет полезен при разработке как мобильных, так и веб приложений.

^ Наверх ^