Recientemente estoy escribiendo un marco JavaScript. Acabo de encapsular el evento DomContentLoaded, y estaba un poco emocionado. Tomé notas sobre los principios y los problemas de compatibilidad encontrados durante el proceso de desarrollo, para evitar olvidar en todas partes.
Cuando escribimos el código JS, generalmente agregamos ventana. Sin embargo, Window.Load esperará hasta que se carguen el DOM, el script, el CSS y se activan todos los recursos en la imagen o incluso iframe. En muchos casos, la página web tiene más imágenes y es más grande. Lleva mucho tiempo cargar la imagen, y obviamente es demasiado tarde para ejecutar JS, lo que a menudo afectará la experiencia del usuario.
Muchos marcos JS tienen una función de documento. Ready, como el método $ (documento) .Ready () de JQuery, que puede ejecutar código JS inmediatamente después de cargar el DOM, para que la imagen se pueda cargar lentamente.
El núcleo de document.ready es el evento DomContentLloaded. Firefox, Chrome, Opera, Safari e IE9+ pueden usar AddEventListener ('DomContentLoaded', Fn, False) para la unión de eventos. IE6 ~ 8 no es compatible con el evento DomContentLoaded, por lo que el procesamiento de compatibilidad debe realizarse para IE6 ~ 8.
La información dice que IE6 ~ 8 puede usar el documento. Si un iframe está incrustado en la página, el Document.ReadyState de IE6 ~ 8 esperará hasta que todos los recursos en el iframe se carguen antes de que se completen. En este momento, el iframe se convierte en un usuario importante que lleva mucho tiempo. Pero después de la prueba, incluso si no hay iframe en la página, cuando ReadyState es igual a completo, el evento de Onload realmente se activa en lugar del evento DomContentLoaded, lo cual es sorprendente hasta este punto.
Afortunadamente, IE tiene un método de doscroll único. Cuando la página DOM no se carga, se informará un error cuando se llame al método de doscroll. Por el contrario, siempre y cuando se llame a Doscroll a intervalos hasta que no se informen ningún error, significa que la página DOM se ha cargado. Este método es válido independientemente de si el contenido en la imagen y el iframe se han cargado.
Si múltiples archivos JS están vinculados al evento Document.Ready, para evitar que el navegador se vincule y desempeñe repetidamente de manera ordenada, se puede introducir un mecanismo de cola de eventos para resolver el problema.
Lo anterior es el problema de principio y compatibilidad del evento Document.ready. El siguiente es un párrafo de código de ejemplo. Para facilitar la comprensión del proceso de ejecución, el proceso de ejecución se escribe en los comentarios utilizando el modo de encapsulación de funciones. Si hay alguna inapropiación, por favor dame algún consejo.
La copia del código es la siguiente:
// Guardar la cola de eventos de Domready
eventQueue = [];
// juzga si el DOM ha sido cargado
iSready = false;
// juzga si Domready está obligado
isbind = falso;
/*Ejecutar domready ()
*
*@param {function}
*@ejecutar empuja el controlador de eventos a la cola de eventos y vincula domcontentloaded
* Si la carga de DOM se ha completado, ejecute inmediatamente
*@llamador
*/
función domready (fn) {
if (isReady) {
fn.call (ventana);
}
demás{
eventQueue.push (fn);
};
bindready ();
};
/*Evento DomReady Binking
*
*@param nulo
*@Ejecutar los navegadores modernos se une a DomContentLOGADO a través de AddEvlistener, incluido IE9+
IE6-8 determina si el DOM se ha cargado juzgando doscroll
*@Caller Domready ()
*/
función bindready () {
if (isReady) return;
if (isbind) return;
isbind = true;
if (window.addeventListener) {
document.adDeventListener ('DomContentLoaded', execfn, falso);
}
else if (window.attachevent) {
doscroll ();
};
};
/*Doscroll determina si el DOM de IE6-8 ha sido cargado.
*
*@param nulo
*@ejecutar doscroll determina si el DOM está cargando
*@Caller Bindready ()
*/
función doscroll () {
intentar{
document.documentelement.doscroll ('izquierda');
}
Catch (Error) {
return setTimeout (Doscroll, 20);
};
execfn ();
};
/*Cola de eventos de ejecución
*
*@param nulo
*@Ejecutar el controlador de eventos de ejecución de bucle en la cola
*@Caller Bindready ()
*/
función execfn () {
if (! isReady) {
iSready = True;
para (var i = 0; i <eventQueue.length; i ++) {
eventQueue [i] .call (ventana);
};
eventQueue = [];
};
};
// JS File 1
domready (function () {
...
});
// JS File 2
domready (function () {
...
});
// Tenga en cuenta que si se carga de forma asincrónica, no se une al método DOMREWE, de lo contrario, la función no se ejecutará.
// porque antes de la descarga de JS de carga asíncrona, DomContentLoaded ha sido disparado y el AddEventListener no se puede escuchar al ejecutar
Página de prueba: se cargan dos imágenes grandes. Onload requiere que la imagen se cargue antes de que JS pueda ejecutarse. DomContentLoaded solo necesita esperar hasta que el DOM esté cargado para ejecutar JS. Puede abrir Firebug para ver el proceso de carga. Recuerde limpiar el caché del navegador antes de cada prueba.