Es necesario juzgar si este archivo CSS está cargado y la práctica de cada navegador es relativamente grande, es necesario decir que el navegador IE está funcionando bien.
Copiar código del código de la siguiente manera:
// Código de festival a Seajs
Function styleOnload (nodo, devolución de llamada) {
// para IE6-9 y Opera
if (node.attachevent) {
node.attachevent ('solo', devolución de llamada);
// aviso:
// 1.
// Esta situación, la ópera no hace nada, así que retrasa al tiempo de espera.
// 2.
}
}
Desafortunadamente, esta vez en otros navegadores, no es tan conveniente juzgar si el CSS está cargado, WebKit puede determinar si está cargado a través de la existencia de la propiedad Node.Sheet.CSSRULES. Y debe usar el evento de intervalo de setTimeOut:
Copiar código del código de la siguiente manera:
// Código de festival a Seajs
Encuesta de funciones (nodo, devolución de llamada) {
if (Callback.iscalle) {
Devolver;
}
var isLoaded = false;
if (/webkit/i.test tostkator.useragent)) {// webkit
if (node ['hoja']) {
isloaded = true;
}
}
// para Firefox
else if (node ['hoja']) {
intentar {
if (node ['hoja']. cssrules) {
isloaded = true;
}
} Catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
isloaded = true;
}
}
}
if (isloaded) {
// dar tiempo para renderizar.
setTimeOut (function () {
llamar de vuelta ();
}, 1);
}
demás {
setTimeOut (function () {
encuesta (nodo, devolución de llamada);
}, 1);
}
}
setTimeOut (function () {
encuesta (nodo, devolución de llamada);
}, 0);
El procesamiento completo dado por SEAJS es este:
Copiar código del código de la siguiente manera:
Function styleOnload (nodo, devolución de llamada) {
// para IE6-9 y Opera
if (node.attachevent) {
node.attachevent ('solo', devolución de llamada);
// aviso:
// 1.
// Esta situación, la ópera no hace nada, así que retrasa al tiempo de espera.
// 2.
}
// Polling para Firefox, Chrome, Safari
demás {
setTimeOut (function () {
encuesta (nodo, devolución de llamada);
}, 0);
}
}
Encuesta de funciones (nodo, devolución de llamada) {
if (Callback.iscalle) {
Devolver;
}
var isLoaded = false;
if (/webkit/i.test tostkator.useragent)) {// webkit
if (node ['hoja']) {
isloaded = true;
}
}
// para Firefox
else if (node ['hoja']) {
intentar {
if (node ['hoja']. cssrules) {
isloaded = true;
}
} Catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
isloaded = true;
}
}
}
if (isloaded) {
// dar tiempo para renderizar.
setTimeOut (function () {
llamar de vuelta ();
}, 1);
}
demás {
setTimeOut (function () {
encuesta (nodo, devolución de llamada);
}, 1);
}
}
// mi función de enlace de creación dinámica
Function createLink (cssurl, lnkid, charset, medios) {{
var head = document.getElementsByTagName ('Head') [0],
linktag = null;
if (! cssurl) {
Devolver falso;
}
linktag = document.createElement ('enlace');
linktag.setAttribute ('id', (lnkid || 'Dynamic-style'));
linktag.setAttribute ('rel', 'stylesheet');
Linktag.SetAttribute ('Charset', (Charset || 'UTF-8'));
Linktag.SetAttribute ('Media', (Media || 'All'));
linktag.setAttribute ('type', 'text/css');
linktag.href = cssurl;
head.appendChild (Linktag);
}
función loadcss () {
Var stylenode = createLink ('/wp-content/themes/bluenight/style.css');
StyleOnload (styleEnode, function () {) {
alerta ("cargado");
});
}
Cuando vi el Código de Seajs, inmediatamente recordé otra solución que vi Diego Perini:
Copiar código del código de la siguiente manera:
/*
* Copyright (c) 2010 Diego Perini
* Reservados todos los derechos.
*
* CSSREAM.JS -CSS Notificación de estado cargado/listo
*
* Autor: Diego Perini <Diego.perini en Gmail com>
* Versión: 0.1
* Creado: 20100616
* Lanzamiento: 20101104
*
* Licencia:
* //www.vevb.com * Descargar:
* http://javascript.nwbox.com/cssream/cssream.js
*/
Función cssream (fn, link) {
var d = documento,
t = D. Createstyles hous,
r = t? 'reglas': 'cssrules',
s = t? 'hojas de estilo': 'hoja'
l = d.getElementsByByTagName ('Link');
// Nodo de enlace o último enlace aprobado
enlace || (enlace = l.length -1];
función check () {
intentar {
Devuelve enlace && link [s] && link [s] [r] && link [s] [r] [0];
} Catch (e) {
Devolver falso;
}
}
(Function Poll () {) {
check () && setTimeout (fn, 0) ||
}) ();
}
De hecho, si ha leído el código de juicio del evento Domream de JQuery, el principio es similar. También es para determinar si el nodo DOM está cargado por rotación por SetTimout.
Además, Fackbook contiene un estilo fijo a través del estilo CSS dinámico, como#Loadcssdom, y Loadcssdom es una altura del estilo 1px. Luego, cree dinámicamente un objeto DOM, agregue este estilo LoadCSSdom. Luego, SetTimeout preguntó si Loadcssdo tenía una altura de 1px. Para la solución de este método de procesamiento, puede colocar "CSSP: Carga de CSS con JavaScript y obteniendo una devolución de llamada en línea".
El autor de "JavaScript Patterns" Stoyan, en su blog, explicó en detalle "¿Cuándo está realmente cargada una hoja de estilo?".
Después de ver esto, puede suspirar: Khan, ¡juzgar si el CSS está cargado no es tan fácil! De hecho, My Here es un tubérculo, porque en el desarrollo, además del CSS de carga dinámica, también tenemos que cargar dinámicamente la operación de JavaScript y cargar dinámicamente las operaciones HTML. , pero antes de eso, sugiero verlos:
"Asegúrese de que JavaScripts/HTML/CSS se carguen a pedido cuando sea necesario", esta biblioteca se maneja específicamente con HTML de carga dinámica, csscript. Como presentó el autor:
Asegúrese de que sea una pequeña biblioteca de JavaScript que proporcione una función práctica, asegure todo el blanco.
"Dígale a CSS que JavavaScript está disponible lo antes posible"
Después de ver esto, es posible que no esté enredado: cuando sus partes de estilo de una página web se verán y funcionarán de manera diferente si JavaScript está disponible o no.
Bueno, dije mucho esta vez, ¡espero que sea útil para el desarrollo y el aprendizaje de todos!