$ (документ). уже эквивалентно без jQuery

Question

У меня есть скрипт, который использует $(document).ready, но он не использует ничего другого из jQuery. Я хотел бы облегчить это, удалив зависимость jQuery.

Как я могу реализовать свою собственную $(document).ready функциональность без использования jQuery? Я знаю, что использование window.onload не будет таким же, как и window.onload срабатывает после загрузки всех изображений, кадров и т.

Answer 1

Если вы загружаете jQuery в нижней части BODY, но у вас возникают проблемы с кодом, который записывает jQuery () или jQuery (document) .ready (), проверьте jqShim на Github.

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

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

Answer 2

Большинство ванильных функций JS Ready НЕ учитывают сценарий, в котором обработчик DOMContentLoaded установлен после , когда документ уже загружен. Это означает, что функция никогда не запустится . Это может произойти, если вы ищете DOMContentLoaded во внешнем скрипте async (<script async src="file.js"></script>).

Приведенный ниже код проверяет DOMContentLoaded только в том случае, если readyState документа еще не interactive или complete.

var DOMReady = function(callback) {
  document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback());
};
DOMReady(function() {
  //DOM ready!
});

Если вы хотите поддерживать IE также:

var DOMReady = function(callback) {
    if (document.readyState === "interactive" || document.readyState === "complete") {
        callback();
    } else if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', callback());
    } else if (document.attachEvent) {
        document.attachEvent('onreadystatechange', function() {
            if (document.readyState != 'loading') {
                callback();
            }
        });
    }
};

DOMReady(function() {
  // DOM ready!
});

Answer 3

Редактирование редактирования @duskwuff для поддержки Internet Explorer 8 тоже. Разница заключается в новом вызове функции test для регулярного выражения и setTimeout с анонимной функцией.

Кроме того, я установил тайм-аут на 99.

function ready(f){/in/.test(document.readyState)?setTimeout(function(){ready(f);},99):f();}