Javascript kapselt die Javascript-Fähigkeiten des DOMContentLoaded-Ereignisses

Ich schreibe kürzlich ein Javascript-Framework und habe gerade das DOMContentLoaded-Ereignis gekapselt. Mit etwas Aufregung habe ich mir Notizen zu den Prinzipien und Kompatibilitätsproblemen gemacht, die während des Entwicklungsprozesses aufgetreten sind, um nicht zu vergessen, überall danach zu suchen .

Wenn wir JS-Code schreiben, fügen wir normalerweise das Ereignis window.onload hinzu, hauptsächlich damit wir nach dem Laden des DOM getElementById, getElementsByTagName und andere Methoden verwenden können, um DOM-Elemente für den Betrieb auszuwählen, aber window.load wartet bis Skripte, CSS und alle Ressourcen im Iframe werden erst dann ausgelöst, wenn das endgültige Bild oder sogar der Iframe geladen ist Das Laden des letzten Bildes vor der Ausführung von js ist sehr zeitaufwändig und beeinträchtigt oft die Benutzererfahrung.

Viele js-Frameworks verfügen über eine document.ready-Funktion, wie z. B. die $(document).ready()-Methode von JQuery, die den js-Code unmittelbar nach dem Laden des DOM ausführen und das Bild langsam laden kann.

Der Kern von document.ready ist das DOMContentLoaded-Ereignis. Firefox, Chrome, Opera, Safari und ie9 können alle addEventListener('DOMContentLoaded',fn,false) für die Ereignisbindung verwenden, aber ie6~8 unterstützt DOMContentLoaded nicht Ereignis, daher müssen Sie eine Kompatibilitätsverarbeitung für ie6~8 durchführen.

Den Informationen zufolge kann ie6~8 das document.onreadystatechange-Ereignis verwenden, um zu überwachen, ob der document.readyState-Status gleich „abgeschlossen“ ist, um festzustellen, ob das DOM geladen wurde document.readyState von ie6~8 wartet, bis der Iframe erst dann vollständig ist, wenn alle Ressourcen geladen sind. Nach dem Testen wird jedoch, selbst wenn auf der Seite kein Iframe vorhanden ist, tatsächlich das Onload-Ereignis anstelle des DOMContentLoaded-Ereignisses ausgelöst.

Glücklicherweise verfügt der IE über eine einzigartige doScroll-Methode. Wenn das Seiten-DOM nicht geladen wurde, wird beim Aufruf der doScroll-Methode ein Fehler gemeldet. Im Gegenteil, solange doScroll in Abständen aufgerufen wird, wird kein Fehler gemeldet Dies bedeutet, dass das Seiten-DOM geladen wurde. Diese Methode ist unabhängig davon gültig, ob der Inhalt im Bild und im Iframe geladen wurde.

Wenn mehrere js-Dateien an das document.ready-Ereignis gebunden sind, kann zur Lösung des Problems ein Ereigniswarteschlangenmechanismus eingeführt werden, um zu verhindern, dass der Browser wiederholt bindet und sie ordnungsgemäß ausführt.

Das Obige ist das Prinzip und die Kompatibilitätsprobleme des document.ready-Ereignisses. Um das Verständnis des Ausführungsprozesses zu erleichtern, wird der Ausführungsprozess in Kommentaren verwendet Irgendetwas stimmt nicht, bitte geben Sie Ratschläge.

Code kopieren Der Code lautet wie folgt:

//Speichern Sie die Ereigniswarteschlange von domReady
eventQueue = [];

//Beurteilen Sie, ob das DOM geladen ist
isReady = false;

/ /Beurteilen Sie, ob DOMReady gebunden ist
isBind = false;

/*Execute domReady()
*
*@param {function}
*@execute Schieben Sie den Ereignishandler in die Ereigniswarteschlange und DOMContentLoaded binden
* Wenn der DOM-Ladevorgang abgeschlossen ist, sofort ausführen
*@caller
*/
function domReady(fn){
if (isReady) {
fn .call(window);
}
else{
eventQueue.push(fn);
};

bindReady();
};

/*domReady-Ereignisbindung
*
*@param null
*@execute Moderne Browser binden DOMContentLoaded über addEvListener, einschließlich ie9
ie6-8 bestimmt durch Beurteilung von doScroll *@caller domReady()
*/
function bindReady(){
if (isReady) return;
if (isBind) return;
isBind = true;

if (window.addEventListener) {
document.addEventListener('DOMContentLoaded',execFn,false);
}
else if (window.attachEvent) {
doScroll();
} ;
};

/*doScroll bestimmt, ob das DOM von ie6-8 geladen ist
*
*@param null
*@execute doScroll bestimmt, ob das DOM geladen ist
*@caller bindReady()
*/
function doScroll(){
try{
document.documentElement.doScroll('left');
}
Catch(error ) {
return setTimeout(doScroll,20);
};
execFn();
};

/*Execution event queue
*
*@ param null
*@execute Schleife des Ereignishandlers in der Ausführungswarteschlange
*@caller bindReady()
*/
function execFn(){
if (!isReady) {
isReady = true;
for (var i = 0; i < eventQueue.length; i ) {
eventQueue[i].call(window);
};
eventQueue = [];
};
};

//js-Datei 1
domReady(function(){
...
});
//js-Datei 2
domReady(function(){
...
});

//Hinweis: Wenn js asynchron geladen wird, binden Sie die domReady-Methode nicht, da die Funktion sonst nicht funktioniert ausgeführt werden,
//Da DOMContentLoaded ausgelöst wurde, bevor das asynchron geladene js heruntergeladen wurde, kann addEventListener bei der Ausführung nicht mehr zuhören

Testseite: Es werden zwei große Bilder geladen, bevor js ausgeführt werden kann. DOMContentLoaded muss nur warten, bis das DOM geladen ist, bevor js ausgeführt wird. Sie können Firebug öffnen, um den Ladevorgang anzuzeigen. Denken Sie daran, den Browser-Cache vor jedem Test zu leeren.