Что не эквивалентно jQuery для $ (document) .ready ()?

Что является эквивалентом не-jQuery $(document).ready()?

Хорошая вещь о $(document).ready()том, что он стреляет раньше window.onload. Функция загрузки ожидает загрузки всего, включая внешние ресурсы и изображения. $(document).readyоднако срабатывает, когда дерево DOM завершено и им можно манипулировать. Если вы хотите получить готовый DOM без jQuery, вы можете проверить эту библиотеку. Кто-то извлек только readyчасть из jQuery. Он красивый и маленький, и вы можете найти его полезным:

уже в Google Code

Это отлично работает, от ECMA

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

Он window.onloadне равен JQuery, $(document).readyпоскольку $(document).readyожидает только дерева DOM при window.onloadпроверке всех элементов, включая внешние ресурсы и изображения.

РЕДАКТИРОВАТЬ : Добавлен IE8 и более старый эквивалент, благодаря наблюдению Яна Дерка . Вы можете прочитать исходный код этого кода на MDN по этой ссылке :

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}

Есть и другие варианты, кроме "interactive". Смотрите MDN ссылку для деталей.

Маленькая вещь, которую я собрал

domready.js

(function(exports, d) {
  function domReady(fn, context) {

    function onReady(event) {
      d.removeEventListener("DOMContentLoaded", onReady);
      fn.call(context || exports, event);
    }

    function onReadyIe(event) {
      if (d.readyState === "complete") {
        d.detachEvent("onreadystatechange", onReadyIe);
        fn.call(context || exports, event);
      }
    }

    d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
    d.attachEvent      && d.attachEvent("onreadystatechange", onReadyIe);
  }

  exports.domReady = domReady;
})(window, document);

Как это использовать

<script src="domready.js"></script>
<script>
  domReady(function(event) {
    alert("dom is ready!");
  });
</script>

Вы также можете изменить контекст, в котором выполняется обратный вызов, передав второй аргумент

function init(event) {
  alert("check the console");
  this.log(event);
}

domReady(init, console);

Теперь, когда наступил 2018 год, вот быстрый и простой способ.

Это добавит прослушиватель событий, но если он уже запущен, мы проверим, находится ли dom в состоянии готовности или что он завершен. Это может произойти до или после завершения загрузки подресурсов (изображений, таблиц стилей, фреймов и т. Д.).

function domReady(fn) {
  // If we're early to the party
  document.addEventListener("DOMContentLoaded", fn);
  // If late; I mean on time.
  if (document.readyState === "interactive" || document.readyState === "complete" ) {
    fn();
  }
}

domReady(() => console.log("DOM is ready, come and get it!"));

Дополнительные чтения

• https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
  • Проверка, завершена ли загрузка
• https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

Обновить

Вот несколько быстрых утилитарных помощников, использующих стандарт ES6 Import & Export, который я написал, включая также TypeScript. Может быть, я смогу сделать из них быструю библиотеку, которая может быть установлена ​​в проекты как зависимость.

JavaScript

export const domReady = (callBack) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

Машинопись

export const domReady = (callBack: () => void) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack: () => void) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

обещания

export const domReady = new Promise(resolve => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', resolve);
  }
  else {
    resolve();
  }
});

export const windowReady = new Promise(resolve => {
  if (document.readyState === 'complete') {
    resolve();
  }
  else {
    window.addEventListener('load', resolve);
  }
});

Согласно http://youmightnotneedjquery.com/#ready хорошая замена, которая все еще работает с IE8

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();
    });
  }
}

// test
window.ready(function() {
    alert('it works');
});

Улучшения : Лично я бы также проверил, является ли тип fnфункцией. И как @elliottregan предложил удалить прослушиватель событий после использования.

Причина, по которой я отвечаю на этот вопрос поздно, заключается в том, что я искал этот ответ, но не мог найти его здесь. И я думаю, что это лучшее решение.

Существует стандартная замена, DOMContentLoaded, которая поддерживается более чем на 90% браузеров, но не в IE8 (поэтому ниже код, используемый JQuery для поддержки браузеров) :

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

Нативная функция jQuery намного сложнее, чем просто window.onload, как показано ниже.

function bindReady(){
    if ( readyBound ) return;
    readyBound = true;

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", function(){
            document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
            jQuery.ready();
        }, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", arguments.callee );
                jQuery.ready();
            }
        });

        // If IE and not an iframe
        // continually check to see if the document is ready
        if ( document.documentElement.doScroll && window == window.top ) (function(){
            if ( jQuery.isReady ) return;

            try {
                // If IE is used, use the trick by Diego Perini
                // http://javascript.nwbox.com/IEContentLoaded/
                document.documentElement.doScroll("left");
            } catch( error ) {
                setTimeout( arguments.callee, 0 );
                return;
            }

            // and execute any waiting functions
            jQuery.ready();
        })();
    }

    // A fallback to window.onload, that will always work
    jQuery.event.add( window, "load", jQuery.ready );
}

В простом ванильном JavaScript, без библиотек? Это ошибка. $это просто идентификатор, и он не определен, если вы его не определите.

jQuery определяет $как собственный «все объект» (также известный как jQueryтак, чтобы вы могли использовать его, не конфликтуя с другими библиотеками). Если вы не используете jQuery (или какую-либо другую библиотеку, которая его определяет), то $она не будет определена.

Или вы спрашиваете, что такое эквивалент в простом JavaScript? В этом случае вы, вероятно, хотитеwindow.onload , что не совсем эквивалентно, но это самый быстрый и простой способ приблизиться к тому же эффекту в обычном JavaScript.

В современных браузерах проще всего было бы использовать соответствующие GlobalEventHandlers , onDOMContentLoaded , onload , onloadeddata (...)

onDOMContentLoaded = (function(){ console.log("DOM ready!") })()

onload = (function(){ console.log("Page fully loaded!") })()

onloadeddata = (function(){ console.log("Data loaded!") })()

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

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Используемая функция является IIFE, очень полезной в этом случае, так как она запускается сама, когда готова:

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

Очевидно, более уместно поместить его в конец любого скрипта.

В ES6 мы также можем написать это как функцию стрелки:

onload = (() => { console.log("ES6 page fully loaded!") })()

Лучше всего использовать элементы DOM, мы можем дождаться готовности любой переменной, которая вызывает IIFE со стрелкой.

Поведение будет таким же, но с меньшим воздействием на память.

footer = (() => { console.log("Footer loaded!") })()

<div id="footer">

Во многих случаях объект документа также запускается по готовности , по крайней мере, в моем браузере. Синтаксис тогда очень хорош, но он требует дальнейших проверок на совместимость.

document=(()=>{    /*Ready*/   })()

Тело onLoad может быть альтернативой:

<html>
<head><title>Body onLoad Exmaple</title>

<script type="text/javascript">
    function window_onload() {
        //do something
    }
</script>

</head>
<body onLoad="window_onload()">

</body>
</html>