Récemment, j'écris un framework JavaScript. Je viens d'encapsuler l'événement téléchargé DomContent, et j'étais un peu excité. J'ai pris des notes sur les principes et les problèmes de compatibilité rencontrés pendant le processus de développement, afin d'éviter d'oublier partout.
Lorsque nous écrivons du code JS, nous ajoutons généralement un événement Window.onload, principalement pour utiliser GetElementById, GetElementsByTagName et d'autres méthodes pour sélectionner des éléments DOM pour l'opération après le chargement du DOM. Cependant, Window.load attendra que le DOM, le script, le CSS soit chargé et toutes les ressources de l'image ou même d'IFRAME soient déclenchées. Dans de nombreux cas, la page Web a plus d'images et est plus grande. Il faut beaucoup de temps pour charger l'image, et il est évidemment trop tard pour exécuter JS, ce qui affectera souvent l'expérience utilisateur.
De nombreux frameworks JS ont un document.
Le cœur de Document.ready est l'événement DomContent. Firefox, Chrome, Opera, Safari et IE9 + peuvent tous utiliser AddEventListener ('DomContent Toloaded', FN, FALSE) pour la liaison des événements. IE6 ~ 8 ne prend pas en charge l'événement téléchargé DomContent, donc le traitement de compatibilité doit être effectué pour IE6 ~ 8.
L'information indique que IE6 ~ 8 peut utiliser l'événement Document.OnreadyStateChange pour écouter si le statut Document.readyState est égal à complet pour déterminer si le DOM a été chargé. Si un iframe est intégré dans la page, le document.readystate of IE6 ~ 8 attendra que toutes les ressources de l'IFRAME soient chargées avant qu'elles ne deviennent complètes. À l'heure actuelle, l'IFRAME devient un utilisateur majeur qui prend du temps. Mais après les tests, même s'il n'y a pas d'IFRAME dans la page, lorsque ReadyState est terminé, l'événement Onload est en fait déclenché à la place de l'événement DomContent Télélé, ce qui est surprenant à ce stade.
Heureusement, IE a une méthode de doscroll unique. Lorsque la page DOM n'est pas chargée, une erreur sera signalée lorsque la méthode Doscroll sera appelée. Inversement, tant que Doscroll est appelé à intervalles jusqu'à ce qu'aucune erreur ne soit signalée, cela signifie que la page DOM a été chargée. Cette méthode est valable, que le contenu de l'image et de l'IFRAME ait été chargé.
Si plusieurs fichiers JS sont liés à l'événement Document.
Ce qui précède est la question du principe et de la compatibilité de l'événement Document. Ce qui suit est un paragraphe d'exemple de code. Afin de faciliter la compréhension du processus d'exécution, le processus d'exécution est écrit dans les commentaires en utilisant le mode d'encapsulation de la fonction. S'il y a une inappropriation, veuillez me donner quelques conseils.
La copie de code est la suivante:
// Enregistrez la file d'attente de l'événement de DomReady
EventQueue = [];
// juger si le DOM a été chargé
isReady = false;
// juger si Domready est lié
isbind = false;
/ * Exécuter domready ()
*
* @ param {fonction}
* @ Execute pousse le gestionnaire d'événements dans la file d'attente d'événements et lie DomContent.
* Si le chargement DOM est terminé, exécutez immédiatement
*@demandeur
* /
fonction DomReady (fn) {
if (isReady) {
fn.call (fenêtre);
}
autre{
EventQueue.push (fn);
};
bindReady ();
};
/ * liaison de l'événement Domready
*
* @ param null
* @ EXECUTE Les navigateurs modernes lient DomContentloaded via AddEvListener, y compris IE9 +
IE6-8 détermine si le DOM a été chargé en jugeant le doscroll
* @ appelant DomReady ()
* /
fonction bindReady () {
si (isReady) revient;
if (isbind) return;
isBind = true;
if (window.addeventListener) {
document.addeventListener ('DomContentloaded', execfn, false);
}
else if (window.attachevent) {
doscroll ();
};
};
/ * Doscroll détermine si le DOM de IE6-8 a été chargé.
*
* @ param null
* @ Exécuter Doscroll détermine si le DOM charge
* @ appelant binDready ()
* /
fonction doscroll () {
essayer{
document.DocumentElement.doscroll («Left»);
}
catch (error) {
return setTimeout (Doscroll, 20);
};
execfn ();
};
/ * File d'attente d'événements d'exécution
*
* @ param null
* @ Exécuter le gestionnaire d'événements d'exécution de la boucle dans la file d'attente
* @ appelant binDready ()
* /
fonction execfn () {
si (! Isready) {
IsReady = true;
for (var i = 0; i <EventQueue.length; i ++) {
EventQueue [i] .Call (fenêtre);
};
EventQueue = [];
};
};
// Fichier JS 1
domready (function () {
...
});
// Fichier JS 2
domready (function () {
...
});
// Notez que s'il est chargé de manière asynchrone, ne liez pas la méthode Domready, sinon la fonction ne sera pas exécutée.
// Parce qu'avant le téléchargement de JS de chargement asynchrone, DomContent Télélé a été licencié et l'AddEventListener ne peut pas être écouté lors de l'exécution
Page de test: Deux grandes images sont chargées. Onload nécessite le chargement de l'image avant que JS puisse être exécuté. DomContentloaded doit seulement attendre que le DOM soit chargé pour exécuter JS. Vous pouvez ouvrir Firebug pour afficher le processus de chargement. N'oubliez pas de nettoyer le cache du navigateur avant chaque test.