Soru jQuery olmadan $ (document) .ready eşdeğeri


Kullanan bir komut dosyası var $(document).readyama jQuery'den başka bir şey kullanmıyor. JQuery bağımlılığını kaldırarak onu aydınlatmak istiyorum.

Kendi başımı nasıl uygulayabilirim? $(document).ready jQuery kullanmadan işlevsellik? Kullanarak biliyorum window.onload aynı olmayacak, window.onload Tüm görüntüler, çerçeveler vb. yüklendikten sonra patlar.


1627
2018-04-28 21:51


Menşei


<body onload = "yourFunc ()"> kesinlikle en hafiftir;) - cgp
... ve kesinlikle aynı işlevsellik değil. - Joel Mueller
Gibi bu cevap jQuery'den istediğinizi belirtirseniz, $(document).readyBu sorunu, sayfanın en üstünde değil, sayfanın en altındaki kodunuzu çalıştırarak kolayca çözebilirsiniz. HTML5Boilerplate Bu kesin yaklaşımı kullanır. - Blazemonger
Neden sadece DOMContentLoaded'i kullanmıyoruz? IE9 + caniuse.com/domcontentloaded  developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded - Brock
Aramamı en son belgeye koydum ve sorunumu çözdüm. Fonksiyon çağrıldığında, her şey yüklenir. - IgniteCoders


Cevaplar:


Standart tabanlı bir değişim var.DOMContentLoaded Bu tarafından desteklenen Tarayıcıların% 98'iIE8 olmasa da:

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

jQuery'nin yerel işlevi, aşağıda gösterildiği gibi, window.onload'dan çok daha karmaşıktır.

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

1053
2018-04-28 21:59



bindReady: github.com/jquery/jquery/blob/master/src/core.js - XP1
Eğer bir kişi kod istediği takdirde burada çalışacak gerçek bir çalışma javascript uygulaması: stackoverflow.com/questions/9899372/... - jfriend00
jQuery DOM hazır kodu basitleştirilmiş görünüyor: github.com/jquery/jquery/blob/master/src/core/ready.js - Jose Nobile
Sanırım hepimiz IE8'den hareket etmeye hazırız ...;). Bağlantı için teşekkürler, @JoseNobile. - Con Antonakos
Daha sonra betik yüklendiyse DOMContentLoaded çalışmayacak. JQuery belgesi her zaman hazır yürütür. - Jared Insel


Düzenle:

İşte jQuery hazır için uygun bir yedek

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

Dan alınan https://plainjs.com/javascript/events/running-code-when-the-document-is-ready-15/


Kabul edilen cevap tamamlanmaktan çok uzak olduğu için, “hazır” bir fonksiyon gibi dikiş atmıştım. jQuery.ready() jQuery 1.6.2 kaynağına dayalı:

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

Nasıl kullanılır:

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

Bu kodun ne kadar işlevsel olduğundan emin değilim, fakat yüzeysel testlerimle iyi çalıştı. Bu biraz zaman aldı, umarım siz ve başkaları bundan faydalanabilir.

PS .: Ben öneririm derleme o.

Ya da kullanabilirsiniz http://dustindiaz.com/smallest-domready-ever:

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

veya yalnızca yeni tarayıcıları desteklemeniz gerekiyorsa yerel işlev (jQuery'den farklı olarak, sayfa yüklendikten sonra bunu eklerseniz bu çalışmaz)

document.addEventListener('DOMContentLoaded',function(){/*fun code to run*/})

290
2017-08-13 20:52



Aman Tanrım. Bir dahaki sefere jQuery Depedency'i kaldırmadan önce birçok kez düşüneceğim. - Johnny_D
@Johnny_D İlk etapta jQuery bağımlılığı eklemeyin = Pain gitti! - Frederik Krautwald
@FrederikKrautwald insanların ne dediği önemli değil, kavramsal olarak jQuery iyi bir şey, çünkü DOM API çok şişirilmiş, ayrıntılı ve tutarsız, sadece bir lite versiyonunun mevcut olmasını diliyorum - Timo Huovinen
@TimoHuovinen Alternatifleri: Zepto.js (9.1 kb), Snack.js (8.1 kb), $ dom (2,3 kb) ve 140 Medley (0.5 kb). Düzenle: Ayrıca Ender'e de bakabilirsiniz. - Frederik Krautwald
@FrederikKrautwald $ dom istediğim gibi geliyor, ancak faturaya uyup uymadığından emin değil. Zepto da gerçekten umut verici görünüyor, paylaşım için teşekkürler! - Timo Huovinen


Üç seçenek:

  1. Eğer script Vücudun son etiketi, DOM komut dosyası yürütmeden önce hazır olurdu
  2. DOM hazır olduğunda, "readyState" "tamamlandı" olarak değişir
  3. 'DOMContentLoaded' etkinlik dinleyicisi altındaki her şeyi ekle

onreadystatechange

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

Kaynak: MDN

DOMContentLoaded

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

Taş Devri tarayıcıları hakkında endişe: JQuery kaynak koduna gidin ve ready işlevi. Bu durumda ayrıştırma yapmıyorsanız + kütüphanenin tamamını yürütürken sadece çok küçük bir kısmını yapıyorsunuz.


184
2017-09-12 22:33



Bu ikinci örnek, belirgin cevaplardan çok daha zarif ve özlüdür. Neden bu bir doğru işaretlenmedi? - 0112
Hala DOMContentLoaded olayı için +1, tam olarak istediğimi yaptı. - tripleee
onreadystatechange benim için hile yaptı ... asenkron jQuery yüklemeden sonra bazı betik çalıştırmak için gerekli. - Abram
Sadece bir FYI gibi, # 1 tamamen doğru değildir. DOM bittikten önce sayfanın sonundaki bir komut dosyasının yüklenmesi oldukça olasıdır. Bu yüzden dinleyiciler üstün. Tarayıcı bittiğinde dinlerler. Sonunda koymak, komut dosyalarının tarayıcının oluşturabileceğinden daha yavaş olduğunu parmaklarınızın üzerinden geçirmektir. - Machavity
Bu varyant, belge zaten bitmiş olduğunda da çalışacaktır, eğer yapabiliyorsanız lütfen (imo en iyi) cevabınızı güncelleyiniz: if (document.readyState == 'complete') {init (); } else {document.onreadystatechange = function () {if (document.readyState == 'complete') {init (); }}} - ZPiDER


Yerleştir <script>/*JavaScript code*/</script> sağ kapanmadan önce  </body> etiket.

Kuşkusuz bu, herkesin amaçlarına uygun olmayabilir, çünkü HTML dosyasında sadece bir JavaScript dosyasında bir şey yapmak yerine bir HTML dosyasını değiştirmeyi gerektirir. document.ready, ama hala...


81
2017-12-07 16:46



Görünüşe göre, sayfa henüz hazır olmadığından, bu ve tarayıcılarda bunu yapamazsınız gibi uyumluluk sorunları vardı. Maalesef daha net hatırlayamıyorum. Bununla birlikte, tüm vakaların% 99'unda (ve Yahoo! tarafından önerilen) yeterince yakın bir şekilde +1. - Boldewyn
Aslında, sayfanın altına bir script öğesi koymak neredeyse mükemmel bir çözümdür. Çapraz tarayıcı çalışır ve document.ready kusursuzunu simüle eder. Tek dezavantajı, bazı akıllı kodları kullanmanın (biraz) daha zorlayıcı olmasıdır, hazır veya init işlevinizi çağırmak için ek bir komut dosyası parçası oluşturmak için yarattığınız komut dosyasının kullanıcısını sormalısınız. - Stijn de Witt
@StijndeWitt - Bir init işlevini çağırmak için ne demek istiyorsun? Document.ready kullanan bir betik, onu aramak için başka bir istemci koduna ihtiyaç duymaz, kendi kendine yeten bir şeydir ve kodun vücudun sonuna dahil edildiği yer ile eşdeğer olabilir ve onu aramak için başka bir kod gerektirir. - nnnnnn
Neden senaryoyu koyma sonra kapanış gövdesi etiketi ve kapanıştan önce </html> etiket? - Charles Holbrow


Zavallı adamın çözümü:

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

checkLoad();  

Fiddle'i Görüntüle

Bunu ekledim, biraz daha iyi sanırım, kendi kapsamı ve özyinesiz

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

Fiddle'i Görüntüle


67
2017-08-04 18:13



@PhilipLangford Veya sadece bir içine koymak setInterval ve özyineyi tamamen kaldırın. - Alex W
@Raveren, hmm haklısın, onu gönderdiğimde test ettiğimden eminim. her neyse, sadece daha basit hale geldi, şimdi fonksiyon sadece çağrıldı, sarma yok. - Jakob Sternberg
Bu seksi değil. Hayır. Üzgünüm. Bir şeyleri tespit etmek için zamanlayıcıları / aralıkları kullanmak “işe yarayabilir” ancak bu şekilde programlama yapmaya devam ederseniz, tuzuna değecek daha büyük bir proje burun dalışına yönelir. Bu gibi şeyleri hacklemeyin. Doğru yap. Lütfen. Bu tür bir kod, kalkınma ekosistemini acıtıyor çünkü daha iyi bir çözüm var ve bunu biliyorsun. - dudewad
Bu cevabı çok daha yakın düşünüyorum dustindiaz.com/smallest-domready-ever Böylece senaryoyu geliştirdim: jsfiddle.net/iegik/PT7x9 - iegik
@ReidBlomquist Evet, ve bu "yanlış" bir yol, ve ben de işaret ettiğim şey (biraz adaletli olsa da, biliyorum). Bunu yanlış yaparak ekosistemin bir şekilde "yardımcı" olduğunu söyleyebiliriz, fakat sorun şu ki, insanların daha iyi bir şekilde tanıma deneyimine sahip olmadıkları için "iyi" bir kod için aldıkları kötü kod miktarıyla ekosisteme yardımcı DEĞİL, çünkü o zaman bu kötü kodu alıp gerçek bir üretim mimari çözümüne uygulayacaklar. Yani, sanırım, bu "yanlış" ile ilgili görüş ayrılığı yapmak zorundayız. - dudewad


Bunu kullanıyorum:

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

Not: Bu muhtemelen yalnızca yeni tarayıcılarla çalışır, özellikle bunlar: http://caniuse.com/#feat=domcontentloaded


31
2017-12-23 19:14



IE9 ve üstü aslında - Pascalius


Gerçekten, eğer önemsersen Internet Explorer 9+ sadece, bu kodun yerini alması yeterli olur jQuery.ready:

    document.addEventListener("DOMContentLoaded", callback);

Endişeleniyorsan Internet Explorer 6 ve bazı gerçekten garip ve nadir tarayıcılar, bu çalışacaktır:

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

19
2017-11-07 07:45





Bu soru oldukça uzun bir süre önce sorulmuştur. Bu soruyu gören herkes için artık bir site var. "jquery'ye ihtiyacınız olmayabilir"  - IE desteğinin seviyesine göre - jQuery'nin tüm işlevselliği ve bazı alternatif, daha küçük kütüphaneler sağlar.

IE8 belge hazır betiğine göre jquery'ye ihtiyacınız olmayabilir

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

15
2018-02-16 14:15



Merak ediyorum neden 'onreadystatechange' yerine gerekli document.attachEvent('onload', fn); - Luke


Son zamanlarda bunu bir mobil site için kullanıyordum. Bu John Resig'in "Pro JavaScript Techniques" in basitleştirilmiş versiyonu. AddEvent'e bağlıdır.

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

13
2017-09-22 01:29



Bu koda dikkat edin. $ (Document) .ready ile eşdeğer değil. Bu kod, DOM'ın tamamen yüklendiğini garanti etmeyen document.body hazır olduğunda geri bildirimi tetikler. - Karolis