Javascript domready?

Ответ 1

Я обновил код DOMAssistant library, он отлично работает со мной

var domReady = (function (){
  var arrDomReadyCallBacks = [] ;
  function excuteDomReadyCallBacks(){
       for (var i=0; i < arrDomReadyCallBacks.length; i++) {
         arrDomReadyCallBacks[i]();
       }
       arrDomReadyCallBacks = [] ;
  }

  return function (callback){
    arrDomReadyCallBacks.push(callback);
     /* Mozilla, Chrome, Opera */
      if (document.addEventListener ) {
          document.addEventListener('DOMContentLoaded', excuteDomReadyCallBacks, false);
      }
    /* Safari, iCab, Konqueror */
    if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
        browserTypeSet = true ;
        var DOMLoadTimer = setInterval(function () {
            if (/loaded|complete/i.test(document.readyState)) {
                //callback();
                excuteDomReadyCallBacks();
                clearInterval(DOMLoadTimer);
            }
        }, 10);
    }
    /* Other web browsers */

    window.onload = excuteDomReadyCallBacks;
}
})()

Ответ 2

Изменить: По мере того, как наступит год 2018 года, я думаю, что можно спокойно слушать DOMContentLoaded событие.

function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}

Обратите внимание, что при загрузке страницы событие будет срабатывать только один раз. Если вам нужно поддерживать действительно старые браузеры, тогда ознакомьтесь с супер легким script, который я собрал ниже.

Только для справки по истории:

jQuery имеет недокументированное свойство isReady, которое используется внутри, чтобы определить, было ли запущено событие готовности DOM:

if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}

Я начал с 1.5.2, вернувшись до 1.3.2, и свойство там. Хотя я не документирован, я бы сказал, что вы можете положиться на это свойство в будущих версиях jQuery. Изменить: И через год - v1.7.2, они все еще используют $.isReady - все еще недокументированные, поэтому, пожалуйста, используйте на свой страх и риск. Будьте осторожны при обновлении.

Изменить: v1.9, они все еще используют $.isReady - все еще недокументированные

Изменить: v2.0, при этом все основные изменения все равно используют $.isReady - все еще недокументированные

Изменить: v3.x все еще использует $.isReady - все еще недокументированный

Изменить: Как уже отмечалось несколькими людьми, вышеупомянутое не отвечает на вопрос. Поэтому я только что создал мини-DOM готовый фрагмент, который был вдохновлен Дастином Диасом еще меньше готового фрагмента DOM. Дастин создал аккуратный способ проверить документ readyState с чем-то похожим на это:

if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}

Причина этого в том, что браузер имеет 3 состояния загрузки: "загрузка", "интерактивная" и "полная" (более старый WebKit также используется "загружен", но вам больше не нужно об этом беспокоиться), Вы заметите, что как "загрузка", так и "интерактивная" содержат текст "in"... поэтому, если строка "in" находится внутри document.readyState, то мы знаем, что мы еще не готовы.

Ответ 3

Хотя я обычно выступаю за то, чтобы избегать использования фреймворков, если это необходимо, я бы сказал, что использование одного в этом случае совершенно нормально. Здесь jQuery:

$(function () {
    // do stuff after DOM has loaded
});

Обратите внимание, что это НЕ то же самое, что и событие window.onload, так как onload выполняется сначала после загрузки других ресурсов (изображения и т.д.). Код, который я использовал в моем примере, будет выполняться, когда DOM закончит загрузку, т.е. когда доступна полная структура HTML (необязательно, когда доступны изображения, CSS и т.д.)

Если вы хотите проверочную переменную, вы можете установить ее в готовой функции:

var documentIsReady = false;
$(function () { documentIsReady = true; });

Конечно, вы можете найти еще более легкие библиотеки, чем jQuery, если все, что вы хотите сделать, это проверить наличие DOM-ready. Но используйте библиотеку в случаях, когда разные браузеры ведут себя по-разному (это один такой случай.)

Использование некоторого кода из библиотеки DOMAssistant, чтобы ваша собственная функция "DOM ready" не была слишком сложной:

var domLoaded = function (callback) {
    /* Internet Explorer */
    /*@cc_on
    @if (@_win32 || @_win64)
        document.write('<script id="ieScriptLoad" defer src="//:"><\/script>');
        document.getElementById('ieScriptLoad').onreadystatechange = function() {
            if (this.readyState == 'complete') {
                callback();
            }
        };
    @end @*/
    /* Mozilla, Chrome, Opera */
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', callback, false);
    }
    /* Safari, iCab, Konqueror */
    if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
        var DOMLoadTimer = setInterval(function () {
            if (/loaded|complete/i.test(document.readyState)) {
                callback();
                clearInterval(DOMLoadTimer);
            }
        }, 10);
    }
    /* Other web browsers */
    window.onload = callback;
};

Не тестировалось, но оно должно работать. Я упростил его с DOMAssistant, потому что DOMAssistant допускает множественные обратные вызовы и проверяет, чтобы вы не могли добавить одну и ту же функцию дважды и т.д.

Ответ 4

За 5 лет, прошедших с момента запроса этого вопроса, DOMContentLoaded стал универсально поддерживаемым событием, и вы можете просто использовать его.

document.addEventListener('DOMContentLoaded', function() {
    //.. do stuff ..
}, false);

Ответ 5

Проверьте эту демонстрацию от Microsoft. → http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html И вот суть кода, который позволяет вам запускать JS на DOM...

(function () {
    function load2(){
        // put whatever you need to load on DOM ready in here
        document.getElementById("but3").addEventListener("click", doMore, false);
    }
    if (window.addEventListener) {
        window.addEventListener('DOMContentLoaded', load2, false);
    } else {
        window.attachEvent('onload', load2);
    }
} ());

Вот некоторые из источников javascript для демонстрации. http://ie.microsoft.com/testdrive/Includes/Script/ReturnAndShareControls.js

Это хорошо работает. Ницца!!.. на Google Chrome и IE 9.

Ответ 6

document.addEventListener("DOMContentLoaded", function(e){
    console.log("dom ready");//output to web browser console
});

для этого не нужен JQuery. Нет необходимости передавать 3-й параметр в DOMContentLoaded, так как это событие не имеет родителя для прохождения события. Также не нужно задумываться о том, что говорят все остальные. Это скажет вам, когда DOM будет полностью загружен и готов к использованию. Я LOLED, когда я заметил DOM помощник lib. Эта библиотека абсолютно бесполезна.

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

addEventListener() - отличная функция для проверки любого события, включая статус готовности DOM. При использовании "DOMContentLoaded" третий параметр в addEventListener() не требуется, поскольку этот триггер не имеет родительского элемента, чтобы передать событие тоже. В приведенном выше примере вы заметите, что второй параметр является анонимной функцией. Вы также можете передать имя функции во второй параметр.

document.addEventListener([(string)event trigger], [function],[(boolean)traverse DOM tree]);

Еще одно преимущество использования этого в JQuery - это не будет нарушено при обновлении JQuery.

Ответ 7

jQuery не использует window.onload.

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

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

Ответ 8

Это на самом деле одна из самых больших причин, по которой большинство людей используют фреймворки, такие как jQuery, потому что решение этого несовместимо в разных браузерах.

Ответ 9

Попробуйте следующее:
Ссылка: onDomReady в GitHub или источник ниже:

if(document.ondomready == undefined) {
    document.ondomready = {};
    document.ondomready = null;
} else {
    document.ondomready=document.ondomready;
}
var oldonload=document.onload;
var isLaunched = 0;
document.onload = function() {  
    if(oldonload !== null) {
        oldonload.call();
    }
};
document.addEventListener("DOMContentLoaded", function onDom(evt) {
    var olddomready = document.ondomready;
    if(olddomready !== null) {
        if(isLaunched == 0) {
            olddomready.call(evt);
            isLaunched == 1;
            //We now launched the mapped DOMContentLoaded Event
        } else {
            //We already launched DOMContentLoaded Event
        }
    }
}, false);

Я уже тестировал это на Opera 11.x/12.x. Еще не проверен на других. Дайте мне знать, если они это сделают.

Примечание: Я еще не загрузил репозиторий, но скоро буду в свободное время.

Ответ 10

Если вы хотите, чтобы меньшие библиотеки, которые занимались только конкретными вещами, вы могли использовать libs в microjs. Для рассматриваемого вопроса может быть использован метод DOMStatic libs ready.