saf JavaScript jQuery eşdeğer'in $.sayfa/dom hazır olduğunda bir işlev çağrısı için hazır

SORU

27 Mart 2012, Salı

saf JavaScript jQuery eşdeğer'in $.sayfa/dom hazır olduğunda bir işlev çağrısı için hazır

Tamam, bu sadece bolca zaman zaman aynı soruyu soran vardır eminim ama aptalca bir soru olabilir. Bana sadece bu konuda 0 emin her iki şekilde yapmak istiyorum. JQuery ile hepimiz harika

$('document').ready(function(){});

Ancak sağlar standart JavaScript ile yazılmış bir işlevi tek başına bir kütüphane desteği ile çalıştırın. Ve bir fonksiyon sayfa bu hazır en kısa sürede başlatmak istiyorum. Uygun bir şekilde bu yaklaşım var mı?

Ya da yapabileceğimi biliyorum

window.onload="myFunction()";

ya da body etiketini kullanabilirsiniz

<body onload="myFunction()">

hatta ama sonunda vücut/html etiketi bir şey sonuçta sayfanın alt kısmında gibi deneyebilirim

<script type="text/javascript">
   myFunction()
</script>

bir WordPress kullanmak gibi bir malikanede bir veya daha fazla işlev veren yok çapraz tarayıcı olmasına rağmen yöntemleri (eski/yeni) bu uyumlu yöntemin dolar.() hazır mı?

CEVAP

28 Mart 2012, ÇARŞAMBA

Senin için çapraz tarayıcı uyumluluğu yapan bir çerçeve olmaması nedeniyle, yapacağımız en basit şey, sadece vücut sonunda kodunuz için bir çağrı yerleştirmek. Bu yük tüm resimler için hazır olmak için DOM için değil, yalnızca bekler, çünkü çalıştırmak için daha hızlı onload işleyicisi daha. Ve bu her tarayıcıda çalışır.

<html>
<head>
</head>
<body>
Your HTML here

<script>
// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here

})();
</script>
</body>
</html>

Eğer gerçekten yapmak istemiyor bu şekilde ihtiyacınız çapraz tarayıcı uyumluluğu ve sen istemiyorsun bekle window.onload, o zaman muhtemelen git bak nasıl bir çerçeve gibi bir WordPress kullanmak uygular $(document).ready() yöntem. Oldukça ilgili tarayıcı yetenekleri bağlı olarak.

Eğer destekleniyorsa, size bir WordPress kullanmak ne ufak bir fikri script etiketi yerleştirilir her yerde çalışacak) vermek için, standart çalışır:

document.addEventListener('DOMContentLoaded', fn, false);

bir geri dönüş için:

window.addEventListener('load', fn, false )

ya IE eski sürümleri için kullanır:

document.attachEvent("onreadystatechange", fn);

bir geri dönüş için:

window.attachEvent("onload", fn);

Ve, tam anlayamadım IE kod yolu alternatif çözüm var, ama kare ile bir ilgisi var gibi görünüyor.

Burada bir WordPress kullanmak .ready() düz javascript ile yazılmış: tam bir yedek

(function(funcName, baseObj) {
    // The public function name defaults to window.docReady
    // but you can pass in your own object and own function name and those will be used
    // if you want to put them in a different namespace
    funcName = funcName || "docReady";
    baseObj = baseObj || window;
    var readyList = [];
    var readyFired = false;
    var readyEventHandlersInstalled = false;

    // call this when the document is ready
    // this function protects itself against being called more than once
    function ready() {
        if (!readyFired) {
            // this must be set to true before we start calling callbacks
            readyFired = true;
            for (var i = 0; i < readyList.length; i  ) {
                // if a callback here happens to add new ready handlers,
                // the docReady() function will see that it already fired
                // and will schedule the callback to run right after
                // this event loop finishes so all handlers will still execute
                // in order and no new ones will be added to the readyList
                // while we are processing the list
                readyList[i].fn.call(window, readyList[i].ctx);
            }
            // allow any closures held by these functions to free
            readyList = [];
        }
    }

    function readyStateChange() {
        if ( document.readyState === "complete" ) {
            ready();
        }
    }

    // This is the one public interface
    // docReady(fn, context);
    // the context argument is optional - if present, it will be passed
    // as an argument to the callback
    baseObj[funcName] = function(callback, context) {
        // if ready has already fired, then just schedule the callback
        // to fire asynchronously, but right away
        if (readyFired) {
            setTimeout(function() {callback(context);}, 1);
            return;
        } else {
            // add the function and context to the list
            readyList.push({fn: callback, ctx: context});
        }
        // if document already ready to go, schedule the ready function to run
        if (document.readyState === "complete") {
            setTimeout(ready, 1);
        } else if (!readyEventHandlersInstalled) {
            // otherwise if we don't have event handlers installed, install them
            if (document.addEventListener) {
                // first choice is DOMContentLoaded event
                document.addEventListener("DOMContentLoaded", ready, false);
                // backup is window load event
                window.addEventListener("load", ready, false);
            } else {
                // must be IE
                document.attachEvent("onreadystatechange", readyStateChange);
                window.attachEvent("onload", ready);
            }
            readyEventHandlersInstalled = true;
        }
    }
})("docReady", window);

Kodu en son sürümünü halka https://github.com/jfriend00/docReady GitHub üzerinde paylaşılır

Kullanımı:

// pass a function reference
docReady(fn);

// use an anonymous function
docReady(function() {
    // code here
});

// pass a function reference and a context
// the context will be passed to the function as the first argument
docReady(fn, context);

// use an anonymous function with a context
docReady(function(context) {
    // code here that can use the context argument that was passed to docReady
}, ctx);

Bu test edilmiştir:

IE6 and up
Firefox 3.6 and up
Chrome 14 and up
Safari 5.1 and up
Opera 11.6 and up
Multiple iOS devices
Multiple Android devices

Çalışan uygulama ve test yatağı: http://jsfiddle.net/jfriend00/YfD3C/

İşte nasıl çalışır özeti:

İçin halka açık olmayan devlet değişkenler kullanılabilir bir HAYAT (hemen çağrılan işlev ifadesi) oluşturun.
Ortak bir işlev docReady(fn, context) ilan
docReady(fn, context) çağrıldığında, eğer hazır işleyicisi harekete olmadığını kontrol edin. Eğer öyleyse, doğru setTimeout(fn, 1) ile JS bitirir bu konuyu sonra ateş için yeni eklenen geri arama zamanlama.
Eğer hazır işleyicisi zaten yok etti, sonra geri aramalar listesine bu yeni geri çağırma sonra çağrılacak ekleyin.
Eğer belge zaten hazır olup olmadığını kontrol edin. Eğer öyleyse, hazır işleyicileri yürütmek.
Eğer olay dinleyicileri henüz belge hazır olduğunda bilmek yüklü vermedik eğer doğru değilse, o zaman bunları şimdi yükleyin.
Eğer document.addEventListener varsa, "DOMContentLoaded" "load" olayları için olay işleyicileri .addEventListener() kullanarak yükleyin. "Yük" güvenlik için yedek bir olay olduğunu ve gerekli değil.
Eğer document.addEventListener yok eğer doğru değilse, o zaman olay işleyicileri "onreadystatechange" .attachEvent() "onload" olayları kullanarak yükleyin.
onreadystatechange durumunda, eğer öyleyse document.readyState === "complete" eğer görmek için kontrol edin, bir işlevi hazır işleyicileri yangın için Ara.
Diğer olay işleyicileri tüm hazır işleyicileri yangın için bir işlev çağrısı.
Tüm hazır işleyicileri çağrı işlevi, devlet bir değişken zaten ateş açtık olmadığını kontrol edin. Eğer varsa, hiçbir şey yapmadan. Eğer Henüz dönmedik eğer doğru değilse, o zaman hazır fonksiyonlar dizi döngü ve eklenen sırayla her birini arayın. Bir bayrak bu asla bir kereden fazla idam onlar sözde tüm göstermek için ayarlayın.
Açık fonksiyon dizisi ile olabilir herhangi kilitler serbest bırakılır.

İşleyicileri docReady() ile kayıtlı kayıtlı oldukları sırada harekete garantilidir.

Eğer belge zaten hazır olduktan sonra docReady(fn) ararsanız, geri geçerli yürütme iş parçacığı setTimeout(fn, 1) kullanarak tamamlar tamamlamaz yürütmek üzere programlanmış olacak. Bu arama kodu daha kısa sürede bitirir JS geçerli iş parçacığı olarak değilse bile daha sonra adı verilecek, o zaman uyumsuz geri aramaları ve arama emri korur her zaman danışmak için izin verir.

Bunu Paylaş: