$(document).ready entspricht ohne jQuery

Question

Ich habe ein Skript, das Folgendes verwendet $(document).ready , aber es verwendet nichts anderes von jQuery. Ich möchte es durch Entfernen der jQuery-Abhängigkeit aufhellen.

Wie kann ich meine eigene $(document).ready Funktionalität ohne jQuery zu verwenden? Ich weiß, dass mit window.onload wird nicht dasselbe sein, da window.onload wird ausgelöst, nachdem alle Bilder, Rahmen usw. geladen wurden.

Answer 1

Minimalistisch und 100% funktionierend

Ich habe die Antwort ausgewählt aus PlainJS und bei mir funktioniert es einwandfrei. Es erweitert DOMContentLoaded so dass sie von allen Browsern akzeptiert werden kann.

---

Diese Funktion ist das Äquivalent zu jQuery's $(document).ready() Methode:

document.addEventListener('DOMContentLoaded', function(){
    // do something
});

Im Gegensatz zu jQuery funktioniert dieser Code jedoch nur in modernen Browsern (IE > 8) und nicht, wenn das Dokument zum Zeitpunkt des Einfügens des Skripts bereits gerendert ist (z. B. über Ajax). Daher müssen wir dies ein wenig erweitern:

function run() {
    // do something
}

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

Dies deckt im Grunde alle Möglichkeiten ab und ist ein brauchbarer Ersatz für den jQuery-Helper.

Answer 2

Es lohnt sich, einen Blick in Rock Solid addEvent() y http://www.braksator.com/how-to-make-your-own-jquery .

Hier ist der Code für den Fall, dass die Website ausfällt

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

Answer 3

Es ist immer gut, JavaScript-Äquivalente im Vergleich zu jQuery zu verwenden. Ein Grund dafür ist, dass man von einer Bibliothek weniger abhängig ist und sie viel schneller sind als die jQuery-Äquivalente.

Eine hervorragende Referenz für jQuery-Äquivalente ist http://youmightnotneedjquery.com/ .

Was Ihre Frage betrifft, so habe ich den untenstehenden Code aus dem obigen Link übernommen :) Der einzige Nachteil ist, dass er nur mit Internet Explorer 9 und später.

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

Answer 4

Der einfachste Weg mit reinem JavaScript. Ohne jQuery:

document.addEventListener("DOMContentLoaded", function(event) {
   // Your code to run since DOM is loaded and ready
});

Answer 5

Dieser browserübergreifende Code ruft eine Funktion auf, sobald das DOM fertig ist:

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

Und so funktioniert es:

1. Die erste Zeile von domReady ruft die toString Methode der Funktion, um eine Zeichenkettendarstellung der übergebenen Funktion zu erhalten und diese in einen Ausdruck zu verpacken, der die Funktion sofort aufruft.
2. Der Rest der domReady erstellt ein Skriptelement mit dem Ausdruck und fügt es an die body des Dokuments.
3. Der Browser führt Skript-Tags aus, die an body nachdem das DOM fertig ist.

Zum Beispiel, wenn Sie dies tun: domReady(function(){alert();}); wird folgendes an den Text angehängt body Element:

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

Beachten Sie, dass dies nur für benutzerdefinierte Funktionen funktioniert. Die folgenden Funktionen funktionieren nicht: domReady(alert);