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

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

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

вопрос задан 28.04.2009
FlySwat
110216 репутация

32 ответов


  • 1092 рейтинг

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

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

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

    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 );
    }
    
    ответ дан Chad Grant, с репутацией 32221, 28.04.2009
  • 292 рейтинг

    Редактировать:

    Вот жизнеспособная замена для JQuery готов

    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 / events / работает-код-когда-документ-готов-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;
    })();
    

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

    
    
    

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

    PS. : Я предлагаю компиляции это.

    Или вы можете использовать http: // dustindiaz. com / smallle-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*/})
    
    ответ дан Timo Huovinen, с репутацией 30950, 13.08.2011
  • 184 рейтинг

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

    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. В этом случае вы не анализируете + не выполняете всю библиотеку, вы делаете только очень маленькую ее часть.

    ответ дан KhanSharp, с репутацией 7475, 12.09.2013
  • 81 рейтинг

    Поместите свой справа перед закрывающим тегом

    .

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

    ответ дан rob, с репутацией 6788, 7.12.2009
  • 67 рейтинг

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

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

    View Fiddle

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

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

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

    ответ дан Jakob Sternberg, с репутацией 1197, 4.08.2012
  • 31 рейтинг

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

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

    Примечание. Возможно, это работает только в новых браузерах, особенно в следующих: http: // caniuse. com / # feat = domcontentloaded

    ответ дан Dustin Davis, с репутацией 10875, 23.12.2013
  • 19 рейтинг

    Действительно, если вы заботитесь только о 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();
            }
        }
    },
    
    ответ дан Dan, с репутацией 31221, 7.11.2014
  • 16 рейтинг

    Этот вопрос был задан довольно давно. Для тех, кто только видит этот вопрос, существует сайт «вам может не понадобиться 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();
            });
    }
    
    ответ дан chugadie, с репутацией 1962, 16.02.2015
  • 13 рейтинг

    Недавно я использовал это для мобильного сайта. Это упрощенная версия Джона Ресига из «Техники 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;
    })();
    
    ответ дан James, с репутацией 151, 22.09.2010
  • 11 рейтинг

    Ответ 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 )
    }
    
    ответ дан Miere, с репутацией 926, 5.09.2012
  • 9 рейтинг

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

    var docLoaded = setInterval(function () {
        if(document.readyState !== "complete") return;
        clearInterval(docLoaded);
    
        /*
            Your code goes here i.e. init()
        */
    }, 30);
    

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

    ответ дан Pawel, с репутацией 5298, 18.11.2013
  • 8 рейтинг

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

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

    См. Этот ответ .

    ответ дан Antara Roy, с репутацией 176, 22.05.2015
  • 6 рейтинг

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

    
    
    

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

    ответ дан davefrassoni, с репутацией 151, 23.02.2013
  • 4 рейтинг

    Стоит искать в Rock Solid addEvent () и http: // www. braksator. com / Как сделать свой собственный 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");});
    
    ответ дан Ben, с репутацией 1230, 28.09.2011
  • 4 рейтинг

    Этот кросс-браузерный код вызовет функцию, когда 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 будет добавлено следующее:

     
    
    

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

    ответ дан Max Heiber, с репутацией 4252, 27.12.2014
  • 3 рейтинг

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

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

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

    function ready(fn) {
        if (document.readyState != 'loading') {
            fn();
        }
        else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    }
    
    ответ дан Vatsal, с репутацией 1012, 26.02.2016
  • 3 рейтинг

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

    // 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();
    };
    
    ответ дан mike, с репутацией 59, 17.08.2012
  • 3 рейтинг

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

    setTimeout(function(){
        //reference/manipulate DOM here
    });
    

    И в отличие от document.addEventListener("DOMContentLoaded" //etc, как в самом верхнем ответе, он работает еще в IE9 - http: // caniuse. com / # search = DOMContentLoaded указывает только на IE11.

    Например, перейдите на https: // netrenderer. ком / индекс. php , выберите Internet Explorer 9 из выпадающего списка, введите https: // dexygen. GitHub. И.О. / блог / окт-2017 / Джекилл / Jekyll-категории / жидкость-шаблоны / 2017/10/22 / как-Джекил-строит-сайт-категории. html и нажмите «Render», и вы увидите что-то похожее на скриншот внизу этого поста.

    См. Следующий код Javascript, который я использую в заголовке для манипулирования стилем темы «хакер» Jekyll - в частности, вы можете сослаться на блок if (location.pathname !== rootPath), чтобы увидеть, как я вставляю ссылки Home и Blog Home, которые отображается IE9 на сайте NetRenderer.

    Интересно, что я наткнулся на это решение setTimeout в 2009 году: Проверяет ли готовность избыточное DOM? , что, вероятно, можно было бы сформулировать немного лучше, как я имел в виду, используя более сложные подходы различных структур.

    setTimeout(function() {//delay execution until after dom is parsed
        var containerEls = document.getElementsByClassName('container');
        var headingEl = containerEls[0].getElementsByTagName('h1')[0];
        var headerEl = document.getElementsByTagName('header')[0];
        var downloadsSectionEl = document.getElementById('downloads');
        var rootPath = "/";
        var blogRootPath = "/blog/";
    
        containerEls[0].style.maxWidth = '800px';
        containerEls[1].style.maxWidth = '800px';
        headingEl.style.margin = '0';
        headerEl.style.marginBottom = '7px';
        downloadsSectionEl.style.margin = '0';
    
        if (location.pathname !== rootPath) {
            downloadsSectionEl.appendChild(generateNavLink('Home', rootPath));
            if (location.pathname !== blogRootPath) {
                downloadsSectionEl.appendChild(document.createTextNode(' | '));
                downloadsSectionEl.appendChild(generateNavLink('Blog Home', blogRootPath));
            }
        }
    
        function generateNavLink(linkText, hrefPath) {
            var navLink = document.createElement('a');
            var linkTextNode = document.createTextNode(linkText);
            navLink.setAttribute('href', hrefPath);
            navLink.appendChild(linkTextNode);
            return navLink;
        }
    });
    

    dexygen.github.io on IE9

    ответ дан George Jempty, с репутацией 6877, 25.10.2017
  • 2 рейтинг

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

    window.onReady = function onReady(fn){
        document.body ? fn() : setTimeout(function(){ onReady(fn);},50);
    };
    
    ответ дан malko, с репутацией 1855, 29.07.2014
  • 2 рейтинг

    Представленные здесь решения 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 создала свою реализацию.

    ответ дан Diego Perini, с репутацией 4923, 5.08.2014
  • 1 рейтинг

    Вот то, что я использую, это быстро и охватывает все основы, я думаю; работает для всего, кроме IE & lt; 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.

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

    ответ дан Olemak, с репутацией 904, 7.07.2016
  • 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");
    });
    
    ответ дан user4617883, с репутацией 316, 22.10.2017
  • 0 рейтинг

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

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

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

    ответ дан tnyfst, с репутацией 1508, 28.04.2009
  • 0 рейтинг

    Для IE9 +:

    function ready(fn) {
      if (document.readyState != 'loading'){
        fn();
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    }
    
    ответ дан Joaquinglezsantos, с репутацией 616, 3.02.2016
  • 0 рейтинг

    Если вы загружаете jQuery в нижней части BODY, но у вас возникают проблемы с кодом, который записывает jQuery (& lt; func & gt;) или jQuery (документ). готов (& lt; func & gt;), посмотрите jqShim на Github.

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

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

    ответ дан Matt Pileggi, с репутацией 5610, 21.02.2014
  • 0 рейтинг
    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 обеспечивает обратный вызов, когда все загружено (изображения и т. Д.)

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

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

    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!");
    });
    
    ответ дан Judah rogan, с репутацией 75, 27.05.2018
  • 0 рейтинг

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

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

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

    (function ready() {
        if (!document.body) {setTimeout(ready, 50); return;}
        // Document is ready here
    })();
    
    ответ дан Javier Rey, с репутацией 893, 13.10.2016
  • -1 рейтинг

    Это был хороший 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);
    
    ответ дан Whome, с репутацией 7350, 3.10.2013
  • -1 рейтинг

    Редактирование редактирования @duskwuff для поддержки Internet Explorer 8 также . Разница заключается в новом вызове проверки функции регулярного выражения и setTimeout с анонимной функцией.

    Кроме того, я установил тайм-аут на 99.

    function ready(f){/in/.test(document.readyState)?setTimeout(function(){ready(f);},99):f();}
    
    ответ дан Forestrf, с репутацией 329, 27.05.2014
  • -4 рейтинг

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

    
    
    

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

    ответ дан Manan Sheth, с репутацией 19, 12.01.2016
  • -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
    
    ответ дан puchu, с репутацией 1359, 27.10.2013