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

Question

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

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

Answer 1

Если вам не нужно поддерживать очень старые браузеры, вот способ сделать это, даже если ваш внешний скрипт загружен с атрибутом async :

HTMLDocument.prototype.ready = new Promise(function(resolve) {
   if(document.readyState != "loading")
      resolve();
   else
      document.addEventListener("DOMContentLoaded", function() {
         resolve();
      });
});

document.ready.then(function() {
   console.log("document.ready");
});

Answer 2

function onDocReady(fn){ 
    $d.readyState!=="loading" ? fn():document.addEventListener('DOMContentLoaded',fn);
}

function onWinLoad(fn){
    $d.readyState==="complete") ? fn(): window.addEventListener('load',fn);
} 

onDocReady обеспечивает обратный вызов, когда администратор HTML готов к полному доступу / анализу / манипулированию.

onWinLoad обеспечивает обратный вызов, когда все загружено (изображения и т. Д.)

• Эти функции можно вызывать в любое время.
• Поддерживает несколько «слушателей».
• Будет работать в любом браузере.

Answer 3

Этот подход - самый короткий путь, который я могу придумать.

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

Этот код совместим со всеми браузерами (включая некоторые устаревшие, вплоть до IE6 и Safari для Windows).

(function ready() {
    if (!document.body) {setTimeout(ready, 50); return;}
    // Document is ready here
})();

Answer 4

Это было хорошее https://stackoverflow.com/a/11810957/185565 решение для бедняка. Один комментарий рассматривал счетчик, чтобы выручить в случае чрезвычайной ситуации. Это моя модификация.

function doTheMagic(counter) {
  alert("It worked on " + counter);
}

// wait for document ready then call handler function
var checkLoad = function(counter) {
  counter++;
  if (document.readyState != "complete" && counter<1000) {
    var fn = function() { checkLoad(counter); };
    setTimeout(fn,10);
  } else doTheMagic(counter);
};
checkLoad(0);

Answer 5

Для IE9 +:

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

Answer 6

Короче говоря, вместо $ (document) .ready (), используемого в jQuery, мы можем использовать метод JavaScript:

<script>
    document.addEventListener("DOMContentLoaded", function_name, false);
    function function_name(){
        statements;
    }
</script>

Таким образом, когда страница готова, т.е. только DOMContentLoaded, будет вызвана функция function_name ().

Answer 7

Если вы хотите поддержать Internet Explorer 7 + (без излишеств, совместимости и других проблем), последний Chrome , последний Safari , последний Firefox и без iframes - этого будет достаточно:

is_loaded = false
callbacks = []

loaded = ->
  is_loaded = true
  for i in [0...callbacks.length]
    callbacks[i].call document
  callbacks = []

content_loaded = ->
  document.removeEventListener "DOMContentLoaded", content_loaded, true
  loaded()

state_changed = ->
  if document.readyState is "complete"
    document.detachEvent "onreadystatechange", state_changed
    loaded()

if !!document.addEventListener
  document.addEventListener "DOMContentLoaded", content_loaded, true
else
  document.attachEvent "onreadystatechange", state_changed

dom_ready = (callback) ->
  if is_loaded
    callback.call document
  else
    callbacks.push callback

Answer 8

(function(f){
  if(document.readyState != "loading") f();
  else document.addEventListener("DOMContentLoaded", f);
})(function(){
  console.log("The Document is ready");
});

Answer 9

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

В любом случае, нет смысла размещать его здесь, просто откройте jQuery и посмотрите на метод bindReady.

Он начинается с вызова либо document.addEventListener("DOMContentLoaded"), либо document.attachEvent('onreadystatechange') в зависимости от модели события, и продолжается оттуда.

Answer 10

Попробуйте это:

function ready(callback){
    if(typeof callback === "function"){
        document.addEventListener("DOMContentLoaded", callback);
        window.addEventListener("load", callback);
    }else{
        throw new Error("Sorry, I can not run this!");
    }
}
ready(function(){
    console.log("It worked!");
});