Що таке не-jQuery еквівалент '$ (документ) .ready ()'?

Що таке еквівалент не jQuery $(document).ready()?

Приємне в тому $(document).ready(), що він стріляє раніше window.onload. Функція навантаження чекає, поки все буде завантажено, включаючи зовнішні активи та зображення. $(document).readyоднак, спрацьовує, коли дерево DOM завершено і ним можна керувати. Якщо ви хочете отримати DOM готовий, без jQuery, ви можете зайти в цю бібліотеку. Хтось витягнув лише readyчастину з jQuery. Його приємно і мало, і вам це може бути корисним:

domready в коді Google

Це чудово працює від ECMA

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

window.onloadЧи не збігається з JQuery , $(document).readyтому що $(document).readyчекає тільки до дерева DOM , а window.onloadперевірити всі елементи , включаючи зовнішні активи і зображення.

EDIT : Додано 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 рік, ось швидкий і простий метод.

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

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

TypeScript

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 повністю завантажений та проаналізований, не чекаючи завантаження таблиць стилів, зображень та підкадрів. Зовсім інше завантаження подій слід використовувати лише для виявлення повністю завантаженої сторінки. Неймовірно популярна помилка використовувати навантаження, де 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>