Эквивалент jQuery $.ready() на чистом JavaScript - как вызвать функцию, когда страница/DOM готовы (дубликат)

Question

Проблема:

Я изучаю, как выполнить определенные функции в стандартном JavaScript, как это делает функция .ready() в jQuery.

С помощью jQuery мы все знаем, как прекрасно работает функция:

$('document').ready(function(){});

Однако мне нужно запустить функцию, написанную на чистом JavaScript, без использования библиотек. Я хочу, чтобы функция выполнялась, как только страница будет готова к ее обработке. Какой правильный подход к этой задаче?

Я знаю, что могу сделать так:

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

Или использовать тег <body>:

<body onload="myFunction()">

Также я могу разместить скрипт внизу страницы, перед закрывающим тегом </body>:

<script type="text/javascript">
    myFunction();
</script>

Однако меня интересует, какой метод с учетом кросс-браузерной совместимости (как для старых, так и для новых браузеров) позволит мне вызывать одну или несколько функций аналогично jQuerys $.ready()`?

Answer 1

Тестировалось в IE9, а также в последних версиях Firefox и Chrome, поддерживается и в IE8.

document.onreadystatechange = function () {
  var state = document.readyState;
  if (state == 'interactive') {
      init();
  } else if (state == 'complete') {
      initOnCompleteLoad();
  }
};

Пример: http://jsfiddle.net/electricvisions/Jacck/

ОБНОВЛЕНИЕ - многоразовая версия

Я только что разработал следующее решение. Это довольно простая альтернатива jQuery или событию DOM ready без обратной совместимости. Возможно, её нужно дополнительно улучшить. Тестировалось в последних версиях Chrome, Firefox и IE (10/11), и должно работать и в более старых браузерах, как указано в комментариях. Я обновлю информацию, если обнаружу какие-либо проблемы.

window.readyHandlers = [];
window.ready = function ready(handler) {
  window.readyHandlers.push(handler);
  handleState();
};

window.handleState = function handleState() {
  if (['interactive', 'complete'].indexOf(document.readyState) > -1) {
    while (window.readyHandlers.length > 0) {
      (window.readyHandlers.shift())();
    }
  }
};

document.onreadystatechange = window.handleState;

Использование:

ready(function () {
  // ваш код здесь
});

Скрипт написан для обработки асинхронной загрузки JS, но вы можете захотеть загрузить его синхронно в начале, если не используете минификацию. Я нашел это решение полезным в процессе разработки.

Современные браузеры также поддерживают асинхронную загрузку скриптов, что дополнительно улучшает пользовательский опыт. Поддержка async означает, что несколько скриптов могут загружаться одновременно, не мешая рендерингу страницы. Просто будьте осторожны с зависимостями от других скриптов, загружаемых асинхронно, или используйте минификатор или что-то вроде browserify для управления зависимостями.

Answer 2

Хорошие люди из HubSpot подготовили ресурс, где вы можете найти методы на чистом JavaScript, позволяющие достичь многих замечательных возможностей jQuery, включая функцию ready. Вот ссылка на этот ресурс:

http://youmightnotneedjquery.com/#ready

Вы можете использовать следующий код для реализации функционала ready:

function ready(fn) {
  if (document.readyState != 'loading') {
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

Пример использования этой функции:

ready(function() { alert('hello'); });

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

Answer 3

Не вполне уверен, что именно вы имеете в виду, но, возможно, это поможет:

window.onload = function(){
    // Код. . .

}

Или:

window.onload = main;

function main(){
    // Код. . .

}

Answer 4

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    
    <script>
        myFunction();
    </script>
</body>
</html>

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

Answer 5

Готово

function ready(fn) {
    var d = document;
    (d.readyState == 'loading') ? d.addEventListener('DOMContentLoaded', fn) : fn();
}

Используйте так:

ready(function() {
    // ваш код
});

Для самовыполняющегося кода

(function(fn) {
    var d = document;
    (d.readyState == 'loading') ? d.addEventListener('DOMContentLoaded', fn) : fn();
})(function() {
    // Ваш код здесь
    // DOM доступен
    // var h1s = document.querySelector("h1");
});

Поддержка: IE9+

Эквивалент jQuery $.ready() на чистом JavaScript - как вызвать функцию, когда страница/DOM готовы (дубликат)

Проблема:

5 ответ(ов)

Готово

Для самовыполняющегося кода

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных