style - ¿Cómo determinar si CSS ha sido cargado?
style tag (4)
Dado que la compatibilidad del navegador puede variar, y los nuevos estándares futuros del navegador están sujetos a cambios, recomendaría una combinación del escucha de carga y la adición de CSS a la hoja de estilo para que pueda escuchar cuándo cambia el índice z de elementos HTML si está usando una sola hoja de estilo. De lo contrario, utilice la siguiente función con una nueva metaetiqueta para cada estilo.
Agregue lo siguiente al archivo CSS que está cargando:
#*(insert a unique id for he current link tag)* {
z-index: 0
}
Agregue lo siguiente a su script:
function whencsslinkloads(csslink, whenload ){
var intervalID = setInterval(
function(){
if (getComputedStyle(csslink).zIndex !== ''0'') return;
clearInterval(intervalID);
csslink.onload = null;
whenload();
},
125 // check for if it has loaded 8 times a second
);
csslink.onload = function(){
clearInterval(intervalID);
csslink.onload = null;
whenload();
}
}
Ejemplo
index.html :
<!doctype html>
<html>
<head>
<link rel=stylesheet id="EpicStyleID" href="the_style.css" />
<script async href="script.js"></script>
</head>
<body>
CSS Loaded: <span id=result>no</span>
</body>
</html>
script.js :
function whencsslinkloads(csslink, whenload ){
var intervalID = setInterval(
function(){
if (getComputedStyle(csslink).zIndex !== ''0'') return;
clearInterval(intervalID);
csslink.onload = null;
whenload();
},
125 // check for if it has loaded 8 times a second
);
csslink.onload = function(){
clearInterval(intervalID);
csslink.onload = null;
whenload();
}
}
/*************************************/
whencsslinkloads(
document.getElementById(''EpicStyleID''),
function(){
document.getElementById(''result'').innerHTML = ''<font color=green></font>''
}
)
the_style.css
#EpicStyleID {
z-index: 0
}
POR FAVOR, no haga que su script se cargue de forma síncrona (sin el atributo async ) solo para que pueda capturar el evento onload del enlace. Hay mejores maneras, como el método anterior.
¿Cómo puedo afirmar que el CSS de una página se ha cargado y aplicado con éxito sus estilos en Watin 2.1?
Después de cargar la página, puede verificar el estilo en algunos de sus elementos algo como esto:
var style = browser.Div(Find.ByClass("class")).Style;
Assert.That(Style.Display, Is.StringContaining("none"));
Assert.That(Style.FontSize, Is.EqualTo("10px"));
Y etc...
Después de investigar y escribir mi respuesta, encontré este enlace que explica todo lo que necesita saber sobre CSS, cuándo se carga y cómo puede verificarlo.
El enlace provisto lo explica tan bien, de hecho, que estoy agregando algunas citas para futuras referencias.
Si tienes curiosidad, mi respuesta sería # 2 y una variación de # 4.
¿Cuándo se carga realmente una hoja de estilo?
...
Con eso fuera del camino, veamos que tenemos aquí.
// my callback function
// which relies on CSS being loaded function
CSSDone() {
alert(''zOMG, CSS is done'');
};
// load me some stylesheet
var url = "http://tools.w3clubs.com/pagr/1.sleep-1.css",
head = document.getElementsByTagName(''head'')[0],
link = document.createElement(''link'');
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
// MAGIC
// call CSSDone() when CSS arrives
head.appendChild(link);
Opciones para la parte mágica, ordenadas de fácil y ridícula a ridícula
- escuchar link.onload
- escuchar link.addEventListener (''cargar'')
- escuchar link.onreadystatechange
- setTimeout y verifica cambios en document.styleSheets
- Establezca setTimeout y verifique los cambios en el estilo de un elemento específico que cree pero estilo con el nuevo CSS
La quinta opción es demasiado loca y asume que tienes control sobre el contenido del CSS, así que olvídalo. Además, comprueba los estilos actuales en un tiempo de espera, lo que significa que eliminará la cola de reflujo y puede ser potencialmente lento. Cuanto más lento sea el CSS para llegar, más reflujos. Así que, realmente, olvídalo.
Entonces, ¿qué hay de implementar la magia?
// MAGIC
// #1
link.onload = function () {
CSSDone(''onload listener'');
};
// #2
if (link.addEventListener) {
link.addEventListener(''load'', function() {
CSSDone("DOM''s load event");
}, false);
};
// #3
link.onreadystatechange = function() {
var state = link.readyState;
if (state === ''loaded'' || state === ''complete'') {
link.onreadystatechange = null;
CSSDone("onreadystatechange");
}
};
// #4
var cssnum = document.styleSheets.length;
var ti = setInterval(function() {
if (document.styleSheets.length > cssnum) {
// needs more work when you load a bunch of CSS files quickly
// e.g. loop from cssnum to the new length, looking
// for the document.styleSheets[n].href === url
// ...
// FF changes the length prematurely :(
CSSDone(''listening to styleSheets.length change'');
clearInterval(ti);
}
}, 10);
// MAGIC ends
Ha habido una actualización del artículo alineado por @ShadowScripter. El nuevo método supuestamente funciona en todos los navegadores, incluido FF.
var style = document.createElement(''style'');
style.textContent = ''@import "'' + url + ''"'';
var fi = setInterval(function() {
try {
style.sheet.cssRules; // <--- MAGIC: only populated when file is loaded
CSSDone(''listening to @import-ed cssRules'');
clearInterval(fi);
} catch (e){}
}, 10);
document.getElementsByTagName(''head'')[0].appendChild(style);