33 Вопрос: $ (документ). уже эквивалентно без jQuery

вопрос создан в Sun, Apr 24, 2016 12:00 AM

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

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

    
1837
  1. ... а также определенно не та же функциональность.
    2009-06-03 19: 39: 34Z
  2. Как этот ответ указывает, если все, что вы хотите от jQuery $(document).ready, вы можете легко решить эту проблему, запустив код в самом низу страницы, а не вверху. HTML5Boilerplate использует именно этот подход.
    2013-06-07 14: 59: 35Z
  3. Почему бы просто не использовать DOMContentLoaded? Это IE9 + caniuse.com/domcontentloaded developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
    2014-07-09 16: 42: 11Z
  4. Я сделал последний звонок в документе, и это решило мою проблему. Когда функция вызывается, все загружается.
    2014-08-20 18: 12: 12Z
30 ответов                              30                         

Существует замена на основе стандартов DOMContentLoaded, которая поддерживается более чем 98% браузеров , хотя не IE8:

 
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 );
}
    
1260
2017-03-14 01: 19: 47Z
  1. 2012-02-03 12: 42: 22Z
  2. Реальная реализация рабочего простого javascript здесь, если кто-то хочет код, который он может просто вставить: stackoverflow.com /вопросы /9899372 /...
    2014-12-13 07: 58: 14Z
  3. Код готового кода jQuery DOM выглядит упрощенным: github.com/jquery/jquery/blob/master/src/core/ready.js
    2015-05-22 01: 13: 41Z
  4. Я думаю, что мы все готовы перейти от IE8 ...;). Спасибо за ссылку, @JoseNobile.
    2015-09-18 16: 26: 25Z
  5. DOMContentLoaded не будет работать, если скрипт будет загружен впоследствии. Готовый документ JQuery выполняется всегда.
    2016-11-16 17: 03: 39Z

Edit:

Вот реальная замена для jQuery reотовы

 
function ready(callback){
    // in case the document is already rendered
    if (document.readyState!='loading') callback();
    // modern browsers
    else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
    // IE <= 8
    else document.attachEvent('onreadystatechange', function(){
        if (document.readyState=='complete') callback();
    });
}

ready(function(){
    // do something
});

Взято из https://plainjs.com/javascript/события /обкатка кода, когда-заместитель документ является готовым-15 /

Еще одна полезная функция domReady здесь взято из https://stackoverflow.com/a/9899701/175071

Поскольку принятый ответ был далек от завершения, я соединил «готовую» функцию, например jQuery.ready(), на основе источника jQuery 1.6.2:

 
var ready = (function(){

    var readyList,
        DOMContentLoaded,
        class2type = {};
        class2type["[object Boolean]"] = "boolean";
        class2type["[object Number]"] = "number";
        class2type["[object String]"] = "string";
        class2type["[object Function]"] = "function";
        class2type["[object Array]"] = "array";
        class2type["[object Date]"] = "date";
        class2type["[object RegExp]"] = "regexp";
        class2type["[object Object]"] = "object";

    var ReadyObj = {
        // Is the DOM ready to be used? Set to true once it occurs.
        isReady: false,
        // A counter to track how many items to wait for before
        // the ready event fires. See #6781
        readyWait: 1,
        // Hold (or release) the ready event
        holdReady: function( hold ) {
            if ( hold ) {
                ReadyObj.readyWait++;
            } else {
                ReadyObj.ready( true );
            }
        },
        // Handle when the DOM is ready
        ready: function( wait ) {
            // Either a released hold or an DOMready/load event and not yet ready
            if ( (wait === true && !--ReadyObj.readyWait) || (wait !== true && !ReadyObj.isReady) ) {
                // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
                if ( !document.body ) {
                    return setTimeout( ReadyObj.ready, 1 );
                }

                // Remember that the DOM is ready
                ReadyObj.isReady = true;
                // If a normal DOM Ready event fired, decrement, and wait if need be
                if ( wait !== true && --ReadyObj.readyWait > 0 ) {
                    return;
                }
                // If there are functions bound, to execute
                readyList.resolveWith( document, [ ReadyObj ] );

                // Trigger any bound ready events
                //if ( ReadyObj.fn.trigger ) {
                //    ReadyObj( document ).trigger( "ready" ).unbind( "ready" );
                //}
            }
        },
        bindReady: function() {
            if ( readyList ) {
                return;
            }
            readyList = ReadyObj._Deferred();

            // Catch cases where $(document).ready() is called after the
            // browser event has already occurred.
            if ( document.readyState === "complete" ) {
                // Handle it asynchronously to allow scripts the opportunity to delay ready
                return setTimeout( ReadyObj.ready, 1 );
            }

            // Mozilla, Opera and webkit nightlies currently support this event
            if ( document.addEventListener ) {
                // Use the handy event callback
                document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
                // A fallback to window.onload, that will always work
                window.addEventListener( "load", ReadyObj.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", DOMContentLoaded );

                // A fallback to window.onload, that will always work
                window.attachEvent( "onload", ReadyObj.ready );

                // If IE and not a frame
                // continually check to see if the document is ready
                var toplevel = false;

                try {
                    toplevel = window.frameElement == null;
                } catch(e) {}

                if ( document.documentElement.doScroll && toplevel ) {
                    doScrollCheck();
                }
            }
        },
        _Deferred: function() {
            var // callbacks list
                callbacks = [],
                // stored [ context , args ]
                fired,
                // to avoid firing when already doing so
                firing,
                // flag to know if the deferred has been cancelled
                cancelled,
                // the deferred itself
                deferred  = {

                    // done( f1, f2, ...)
                    done: function() {
                        if ( !cancelled ) {
                            var args = arguments,
                                i,
                                length,
                                elem,
                                type,
                                _fired;
                            if ( fired ) {
                                _fired = fired;
                                fired = 0;
                            }
                            for ( i = 0, length = args.length; i < length; i++ ) {
                                elem = args[ i ];
                                type = ReadyObj.type( elem );
                                if ( type === "array" ) {
                                    deferred.done.apply( deferred, elem );
                                } else if ( type === "function" ) {
                                    callbacks.push( elem );
                                }
                            }
                            if ( _fired ) {
                                deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] );
                            }
                        }
                        return this;
                    },

                    // resolve with given context and args
                    resolveWith: function( context, args ) {
                        if ( !cancelled && !fired && !firing ) {
                            // make sure args are available (#8421)
                            args = args || [];
                            firing = 1;
                            try {
                                while( callbacks[ 0 ] ) {
                                    callbacks.shift().apply( context, args );//shifts a callback, and applies it to document
                                }
                            }
                            finally {
                                fired = [ context, args ];
                                firing = 0;
                            }
                        }
                        return this;
                    },

                    // resolve with this as context and given arguments
                    resolve: function() {
                        deferred.resolveWith( this, arguments );
                        return this;
                    },

                    // Has this deferred been resolved?
                    isResolved: function() {
                        return !!( firing || fired );
                    },

                    // Cancel
                    cancel: function() {
                        cancelled = 1;
                        callbacks = [];
                        return this;
                    }
                };

            return deferred;
        },
        type: function( obj ) {
            return obj == null ?
                String( obj ) :
                class2type[ Object.prototype.toString.call(obj) ] || "object";
        }
    }
    // The DOM ready check for Internet Explorer
    function doScrollCheck() {
        if ( ReadyObj.isReady ) {
            return;
        }

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

        // and execute any waiting functions
        ReadyObj.ready();
    }
    // Cleanup functions for the document ready method
    if ( document.addEventListener ) {
        DOMContentLoaded = function() {
            document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
            ReadyObj.ready();
        };

    } else if ( document.attachEvent ) {
        DOMContentLoaded = function() {
            // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", DOMContentLoaded );
                ReadyObj.ready();
            }
        };
    }
    function ready( fn ) {
        // Attach the listeners
        ReadyObj.bindReady();

        var type = ReadyObj.type( fn );

        // Add the callback
        readyList.done( fn );//readyList is result of _Deferred()
    }
    return ready;
})();

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

 
<script>
    ready(function(){
        alert('It works!');
    });
    ready(function(){
        alert('Also works!');
    });
</script>

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

PS .: Я предлагаю его компилировать .

Или вы можете использовать http://dustindiaz.com/smallest-domready-ever : р>  

function r(f){/in/.test(document.readyState)?setTimeout(r,9,f):f()}
r(function(){/*code to run*/});

или встроенная функция, если вам нужно только поддерживать новые браузеры (в отличие от готового jQuery, он не запустится, если вы добавите его после загрузки страницы)

 
document.addEventListener('DOMContentLoaded',function(){/*fun code to run*/})
    
319
2018-08-29 06: 40: 48Z
  1. О, Боже. Я подумаю много раз, прежде чем в следующий раз удалить зависимость от jquery.
    2013-10-03 12: 15: 01Z
  2. @ Johnny_D Во-первых, не добавляйте зависимость jQuery = Боль ушла!
    2014-10-10 18: 16: 03Z
  3. @ FrederikKrautwald, что бы ни говорили люди, концептуально jQuery - хорошая вещь, поскольку API DOM очень раздутый, многословный и противоречивый, я просто хочу, чтобы облегченная версия был доступен
    2014-10-11 09: 29: 14Z
  4. @ TimoHuovinen Альтернативы: Zepto.js (9,1 КБ), Snack.js (8,1 КБ), $dom (2,3 КБ) и 140 Medley (0,5 КБ). Edit: Вы также можете взглянуть на Ender.
    2014-10-11 23: 42: 05Z
  5. @ FrederikKrautwald $dom звучит как то, что я хотел бы, но не уверен, что это соответствует требованиям. Zepto также выглядит многообещающе, спасибо, что поделились!
    2014-10-13 20: 41: 59Z

Три варианта:

  1. Если script является последним тегом тела, DOM будет готов до выполнения тега скрипта
  2. Когда DOM готов, «readyState» изменится на «complete»
  3. Поместите все в обработчик событий 'DOMContentLoaded'

onreadystatechange

 
  document.onreadystatechange = function () {
     if (document.readyState == "complete") {
     // document is ready. Do your stuff here
   }
 }

Источник: MDN

DOMContentLoaded

 
document.addEventListener('DOMContentLoaded', function() {
   console.log('document is ready. I can sleep now');
});

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

    
196
2016-04-24 11: 25: 43Z
  1. Этот второй пример гораздо более элегантен и лаконичен, чем отмеченные ответы. Почему этот не был помечен как правильный?
    2014-07-16 22: 12: 37Z
  2. Тем не менее +1 для объекта DOMContentLoaded, он сделал именно то, что я хотел.
    2014-09-16 10: 14: 28Z
  3. onreadystatechange сделал свое дело для меня ... нужно было запустить какой-нибудь скрипт после асинхронной загрузки jquery.
    2016-03-10 06: 16: 43Z
  4. Так же, как и к вашему сведению, # 1 не совсем верно.Сценарий в конце страницы вполне может быть загружен до того, как DOM будет готов. Вот почему слушатели выше. Они слушают, когда браузер готов. Если положить его в конец, это значит, что загрузка скрипта была медленнее, чем может сделать браузер.
    2016-10-17 14: 11: 00Z
  5. этот вариант также будет работать, когда документ уже будет загружен, обновите свой (imo best) ответ, если сможете: if (document.readyState == 'complete' ) { в этом(); } else {document.onreadystatechange = function () {if (document.readyState == 'complete') {init (); }}}
    2017-10-17 07: 50: 08Z

Поместите свой <script>/*JavaScript code*/</script> справа перед закрывающим тэгом </body>.

Конечно, это может не подходить для всех, поскольку требует изменения файла HTML, а не просто выполнения чего-либо в файле JavaScript, как в document.ready, но все же ...

    
85
2016-04-24 11: 19: 37Z
  1. Мне кажется, что были проблемы с совместимостью, например, поскольку страница еще не готова, вы не можете делать то или это в этих и тех браузерах. К сожалению, я не могу вспомнить более ясно. Тем не менее +1 для пути, который достаточно близок в 99% всех случаев (и предложенный Yahoo!).
    2009-12-07 16: 49: 51Z
  2. На самом деле, поместить элемент скрипта внизу страницы - это почти идеальное решение. Он работает в кросс-браузерном режиме и имитирует документ. Единственным недостатком является то, что это (немного) более навязчиво, чем использование какого-то умного кода, вам нужно будет попросить пользователя создаваемого скрипта добавить дополнительный фрагмент скрипта для вызова вашей функции ready или init.
    2011-03-11 22: 12: 10Z
  3. @ StijndeWitt - Что вы имеете в виду при необходимости вызова функции инициализации? Скрипт, который использует document.ready, не нуждается в другом клиентском коде для его вызова, он самодостаточен и эквивалентен тому, где код включен в конец тела, также может быть автономным и не потребовать другой код, чтобы вызвать его либо.
    2017-10-21 03: 39: 26Z
  4. Почему бы не поместить скрипт после закрывающего тега body и перед закрывающим тегом </html>?
    2018-04-25 19: 27: 19Z
  5. @ CharlesHolbrow Хотя все браузеры интерпретируют его правильно, если вы хотите, чтобы он был действительным html, html должен содержать только head и body.
    2018-12-03 22: 56: 39Z

Бедное мужское решение:

 
var checkLoad = function() {   
    document.readyState !== "complete" ? setTimeout(checkLoad, 11) : alert("loaded!");   
};  

checkLoad();  

Просмотр скрипта

Добавил этот, немного лучше, я думаю, собственный охват и не рекурсивный

 
(function(){
    var tId = setInterval(function() {
        if (document.readyState == "complete") onComplete()
    }, 11);
    function onComplete(){
        clearInterval(tId);    
        alert("loaded!");    
    };
})()

Просмотр скрипта

    
67
2015-07-27 18: 53: 26Z
  1. @ PhilipLangford Или просто поместите его в setInterval и полностью удалите рекурсию.
    2013-05-22 17: 40: 16Z
  2. @ Раверен, хм, вы правы, я уверен, что проверял это, когда отправлял. В любом случае, это стало еще проще, теперь функция вызывается без переноса.
    2013-12-10 03: 42: 35Z
  3. Это не сексуально. Нет извините. Использование таймеров /интервалов для обнаружения чего-либо может «работать», но если вы продолжите программировать, как этот, любой более крупный проект, достойный его соли, начнет нырять. Не взламывайте такие вещи вместе, как это. Сделай это правильно. Пожалуйста. Этот вид кода наносит ущерб экосистеме разработки, потому что есть лучшее решение, и вы ЗНАЕТЕ его.
    2014-07-17 21: 35: 50Z
  4. Я думаю, что этот ответ намного ближе к dustindiaz. com /smalllest-domready-ever Поэтому я улучшил скрипт: jsfiddle.net/iegik/PT7x9а>
    2014-07-25 13: 07: 32Z
  5. @ ReidBlomquist Да, и это «неправильный» способ, и именно на это я и указываю (хотя я знаю, что это немного категорично). Вы могли бы сказать, что, делая это неправильно, это как-то «помогает» экосистеме, но проблема в том, что с количеством плохого кода, который люди принимают за «хороший» код, потому что у них нет опыта, чтобы узнать что-то лучше НЕ помогает экосистеме, потому что тогда они возьмут этот плохой код и воплотят его в реальное производственное архитектурное решение. Так что, я думаю, нам просто придется расходиться во мнениях по поводу этой «ошибки».
    2014-12-04 18: 20: 12Z

Я использую это:

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

Примечание. Это, вероятно, работает только с новыми браузерами, особенно с такими: http://caniuse.com/#feat=domcontentloaded р>     

34
2016-04-24 11: 31: 15Z
  1. IE9 и выше на самом деле
    2014-03-29 21: 04: 03Z
  2. Это также прекрасно работает в скриптах содержимого расширения Chrome, если вы перехватываете событие document_start или document_idle.
    2019-01-31 01: 17: 07Z

Действительно, если вы заботитесь только о Internet Explorer 9+ . , этого кода будет достаточно для замены jQuery.ready:

 
    document.addEventListener("DOMContentLoaded", callback);

Если вы беспокоитесь о Internet Explorer 6 и некоторых действительно странных и редких браузерах, это будет работать

 
domReady: function (callback) {
    // Mozilla, Opera and WebKit
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", callback, false);
        // If Internet Explorer, the event model is used
    } else if (document.attachEvent) {
        document.attachEvent("onreadystatechange", function() {
            if (document.readyState === "complete" ) {
                callback();
            }
        });
        // A fallback to window.onload, that will always work
    } else {
        var oldOnload = window.onload;
        window.onload = function () {
            oldOnload && oldOnload();
            callback();
        }
    }
},
    
20
2016-04-24 11: 41: 47Z

Этот вопрос был задан довольно давно. Для тех, кто только видит этот вопрос, теперь есть сайт под названием «вам может не понадобиться jquery» , который разбит по уровням Требуется поддержка IE - все функции jquery и некоторые альтернативные, более мелкие библиотеки.

Скрипт готового документа IE8 в соответствии с вам может не понадобиться jquery

 
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();
        });
}
    
18
2015-07-28 09: 04: 16Z
  1. Интересно, почему нужен 'onreadystatechange', а не document.attachEvent('onload', fn);
    2015-10-13 21: 31: 09Z

Я недавно использовал это для мобильного сайта. Это упрощенная версия Джона Ресига из «Техники Pro JavaScript». Это зависит от addEvent.

 
var ready = ( function () {
  function ready( f ) {
    if( ready.done ) return f();

    if( ready.timer ) {
      ready.ready.push(f);
    } else {
      addEvent( window, "load", isDOMReady );
      ready.ready = [ f ];
      ready.timer = setInterval(isDOMReady, 13);
    }
  };

  function isDOMReady() {
    if( ready.done ) return false;

    if( document && document.getElementsByTagName && document.getElementById && document.body ) {
      clearInterval( ready.timer );
      ready.timer = null;
      for( var i = 0; i < ready.ready.length; i++ ) {
        ready.ready[i]();
      }
      ready.ready = null;
      ready.done = true;
    }
  }

  return ready;
})();
    
2011-11-04 01: 28: 55Z
  1. Будьте осторожны с этим кодом. Это НЕ эквивалентно $(документ) .ready. Этот код запускает обратный вызов, когда document.body готов, что не гарантирует полной загрузки DOM.
    2011-11-09 14: 24: 07Z

Ответ jQuery был довольно полезен для меня. С небольшим заводом это соответствовало моим потребностям хорошо. Надеюсь, это кому-нибудь еще поможет.

 
function onReady ( callback ){
    var addListener = document.addEventListener || document.attachEvent,
        removeListener =  document.removeEventListener || document.detachEvent
        eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange"

    addListener.call(document, eventName, function(){
        removeListener( eventName, arguments.callee, false )
        callback()
    }, false )
}
    
11
2012-09-05 16: 56: 58Z
  1. в некоторых браузерах removeListener необходимо вызывать с документом в качестве контекста, т.е. removeListener.call(document, ...
    2013-03-19 03: 44: 41Z

Кросс-браузер (тоже старые браузеры) и простое решение:

 
var docLoaded = setInterval(function () {
    if(document.readyState !== "complete") return;
    clearInterval(docLoaded);

    /*
        Your code goes here i.e. init()
    */
}, 30);

Отображение предупреждения в jsfiddle

    
10
2016-05-09 18: 29: 58Z
  1. За исключением случаев, когда загрузка DOM занимает более 30 мс, ваш код не будет выполняться.
    2017-08-04 20: 29: 29Z
  2. @ Quelklef, это setInterval, а не setTimeout
    2017-08-05 16: 08: 03Z
  3. Ты прав, мой плохой.
    2017-08-05 16: 09: 40Z

Ниже приведен самый маленький фрагмент кода для тестирования готовности к DOM , который работает во всех браузерах (даже в IE 8):

 
r(function(){
    alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

См. ответ .

    
9
2017-05-23 12: 34: 44Z

Просто добавьте это в конец своей HTML-страницы ...

 
<script>
    Your_Function();
</script>

Потому что документы HTML анализируются сверху вниз.

    
6
2016-04-24 11: 23: 40Z
  1. Как узнать, что DOM создается при выполнении этого кода? В том числе загруженный и проанализированный CSS? API браузера DOMContentLoaded предназначен для этого.
    2014-11-07 07: 33: 00Z
  2. Это действительно зависит от того, что он хочет делать с js. Если он действительно должен выполнить что-то, когда страница закончилась или нет.
    2019-05-13 01: 54: 04Z

Этот кросс-браузерный код вызовет функцию, как только DOM будет готов:

 
var domReady=function(func){
    var scriptText='('+func+')();';
    var scriptElement=document.createElement('script');
    scriptElement.innerText=scriptText;
    document.body.appendChild(scriptElement);
};

Вот как это работает:

  1. Первая строка domReady вызывает toString метод функции, чтобы получить строковое представление передаваемой функции и обернуть его в выражение, которое немедленно вызывает функцию.
  2. Оставшаяся часть domReady создает элемент сценария сВыражение и добавляет его к body документа.
  3. Браузер запускает теги сценариев, добавленные к body после того, как DOM готов.

Например, если вы сделаете это: domReady(function(){alert();});, к элементу body будет добавлено следующее:

 
 <script>(function (){alert();})();</script>

Обратите внимание, что это работает только для пользовательских функций. Следующее не будет работать: domReady(alert);

    
4
2014-12-27 17: 04: 16Z

Стоит поискать в Rock Solid addEvent () и http://www.braksator.com/how-to- макияж своего собственного JQuery .

Вот код на случай, если сайт закроется

 
function addEvent(obj, type, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
        EventCache.add(obj, type, fn);
    }
    else if (obj.attachEvent) {
        obj["e"+type+fn] = fn;
        obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
        obj.attachEvent( "on"+type, obj[type+fn] );
        EventCache.add(obj, type, fn);
    }
    else {
        obj["on"+type] = obj["e"+type+fn];
    }
}

var EventCache = function(){
    var listEvents = [];
    return {
        listEvents : listEvents,
        add : function(node, sEventName, fHandler){
            listEvents.push(arguments);
        },
        flush : function(){
            var i, item;
            for(i = listEvents.length - 1; i >= 0; i = i - 1){
                item = listEvents[i];
                if(item[0].removeEventListener){
                    item[0].removeEventListener(item[1], item[2], item[3]);
                };
                if(item[1].substring(0, 2) != "on"){
                    item[1] = "on" + item[1];
                };
                if(item[0].detachEvent){
                    item[0].detachEvent(item[1], item[2]);
                };
                item[0][item[1]] = null;
            };
        }
    };
}();

// Usage
addEvent(window, 'unload', EventCache.flush);
addEvent(window, 'load', function(){alert("I'm ready");});
    
4
2016-04-24 11: 28: 09Z
  1. Вторая ссылка не работает.
    2016-04-24 11: 22: 40Z
  2. 2016-06-27 22: 03: 51Z

Как насчет этого решения?

 
// other onload attached earlier
window.onload=function() {
   alert('test');
};

tmpPreviousFunction=window.onload ? window.onload : null;

// our onload function
window.onload=function() {
   alert('another message');

   // execute previous one
   if (tmpPreviousFunction) tmpPreviousFunction();
};
    
3
2012-08-17 07: 33: 55Z
  1. Вы можете использовать addEventListener для окна с "load". Слушатели выполняются один за другим и не требуют цепочки вручную.
    2013-01-09 10: 36: 38Z
  2. Но загрузка отличается от готовности. «Загрузка» происходит даже до того, как документ «готов». В готовом документе загружен DOM, в загруженном окне необязательно готов DOM. Хороший ответ, хотя
    2013-03-30 08: 45: 51Z
  3. @ Mzn: я думаю, что это наоборот. Я думаю, что готовый документ происходит до события загрузки окна. «В общем, нет необходимости ждать полной загрузки всех изображений. Если код может быть выполнен раньше, обычно лучше поместить его в обработчик, отправленный методу .ready ()». ( api.jquery.com/load-event )
    2013-08-23 23: 24: 10Z
  4. это переопределит остальные события window.onload на странице и вызовет проблемы. он должен добавить событие поверх существующего.
    2014-02-19 23: 08: 18Z
  5. Событие загрузки может произойти слишком поздно. Больно использовать его, когда зависит от внешних сторонних js /изображений ... Не отвечающий сервер, который вы не контролируете, и все терпит неудачу. Использование DOMContentLoaded - это не просто оптимизация, это еще и безопаснее!
    2014-12-10 22: 29: 05Z

Всегда полезно использовать эквиваленты JavaScript по сравнению с jQuery. Одна из причин заключается в том, что от библиотек зависит меньше библиотек, и они работают намного быстрее, чем эквиваленты jQuery.

Одна из фантастических ссылок на jQuery-эквиваленты - http://youmightnotneedjquery.com/.

Что касается вашего вопроса, я взял приведенный ниже код по приведенной выше ссылке :) Единственное предостережение: он работает только с Internet Explorer 9 и более поздними версиями.

 
function ready(fn) {
    if (document.readyState != 'loading') {
        fn();
    }
    else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}
    
3
2016-04-24 11: 45: 59Z

Мы нашли нашу простую кросс-браузерную реализацию, которая может помочь в большинстве простых случаев с минимальной реализацией:

 
window.onReady = function onReady(fn){
    document.body ? fn() : setTimeout(function(){ onReady(fn);},50);
};
    
2
2016-04-24 11: 38: 12Z
  1. что такое doc.body!?
    2016-03-09 22: 50: 35Z

Представленные здесь решения setTimeout /setInterval будут работать только при определенных обстоятельствах.

Проблема проявляется, особенно в старых версиях Internet Explorer до 8.

Переменные, влияющие на успех этих решений setTimeout /setInterval:

 
1) dynamic or static HTML
2) cached or non cached requests
3) size of the complete HTML document
4) chunked or non chunked transfer encoding

оригинальный (нативный Javascript) код для решения этой конкретной проблемы находится здесь:

 
https://github.com/dperini/ContentLoaded
http://javascript.nwbox.com/ContentLoaded (test)

это код, из которого команда jQuery создала свою реализацию.

    
2
2016-08-14 11: 41: 08Z

Вот что я использую, это быстро и охватывает все основы, я думаю; работает для всего, кроме IE < 9.

 
(() => { function fn() {
    // "On document ready" commands:
    console.log(document.readyState);
};  
  if (document.readyState != 'loading') {fn()}
  else {document.addEventListener('DOMContentLoaded', fn)}
})();

Это похоже на все случаи.

  • срабатывает немедленно, если DOM уже готов (если DOM не «загружается», а «интерактивен» или «завершен»)
  • если DOM все еще загружается, он устанавливает прослушиватель событий, когда DOM доступно (интерактивно).

Событие DOMContentLoaded доступно в IE9 и во всем остальном, поэтому я лично считаю, что можно использовать это. Перепишите объявление функции стрелки в обычную анонимную функцию, если вы не переносите свой код из ES2015 в ES5.

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

    
1
2016-07-07 13: 46: 43Z

Если вам не нужно поддерживать очень старые браузеры, вот способ сделать это, даже если ваш внешний скрипт загружен с атрибутом 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");
});
    
1
2017-10-22 07: 10: 31Z

Для IE9 +:

 
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
    
0
2016-02-03 15: 20: 32Z

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

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

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

    
0
2016-04-24 11: 32: 54Z

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

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

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

 
(function ready() {
    if (!document.body) {setTimeout(ready, 50); return;}
    // Document is ready here
})();
    
0
2016-10-18 12: 57: 07Z

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

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

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

    
0
2017-12-18 20: 07: 42Z

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

 
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!");
});
    
0
2018-05-27 16: 11: 24Z
 
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 обеспечивает обратный вызов, когда все загружено (изображения и т. д.)

  • Эти функции можно вызывать в любое время.
  • Поддерживает несколько "слушателей".
  • Будет работать в любом браузере.
0
2018-05-28 22: 50: 17Z
 
(function(f){
  if(document.readyState != "loading") f();
  else document.addEventListener("DOMContentLoaded", f);
})(function(){
  console.log("The Document is ready");
});
    
0
2018-11-27 21: 40: 42Z
  1. Что это добавляет, а другие ответы нет?
    2018-11-28 00: 56: 54Z
  2. Он использует автономное замыкание (не заполняет глобальную область «окна»), работает во всех браузерах и очень компактен. Я не вижу других ответов, как это.
    2018-11-28 15: 56: 07Z
  3. Это также работает даже после того, как DOM уже загружен (как делает jQuery.ready), что большинство этих ответов не может сделать.
    2018-11-28 15: 56: 52Z

Большинство ванильных функций 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!
});
    
0
2019-04-12 16: 12: 44Z

Это было хорошее 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);
    
- 1
2017-05-23 11: 55: 00Z
источник размещен Вот