É necessário julgar se esse arquivo CSS é carregado e a prática de cada navegador é relativamente grande.
Copie o código do código da seguinte forma:
// Code Festival para Seajs
Função StyleOnLload (nó, retorno de chamada) {
// para IE6-9 e ópera
if (node.attachevent) {
node.attachevent ('somente', retorno de chamada);
// perceber:
// 1.
// Esta situação, a Opera não faz nada, tão fallback ao tempo limite.
// 2.
}
}
Infelizmente, desta vez em outros navegadores, não é tão conveniente julgar se o CSS está carregado. E você precisa usar o evento de intervalo Settimeout:
Copie o código do código da seguinte forma:
// Code Festival para Seajs
Enquete de função (nó, retorno de chamada) {
if (retorno de chamada.iscalled) {
Retornar;
}
var isLloaded = false;
if (/webkit/i.test tostkator.useragent)) {// webkit
if (node ['Sheet']) {
isloaded = true;
}
}
// para Firefox
else if (node ['sheet']) {
tentar {
if (nó ['folha']. cssrules) {
isloaded = true;
}
} Catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
isloaded = true;
}
}
}
if (isloaded) {
// Dê tempo para renderizar.
setTimeout (function () {
ligar de volta ();
}, 1);
}
outro {
setTimeout (function () {
enquete (nó, retorno de chamada);
}, 1);
}
}
setTimeout (function () {
enquete (nó, retorno de chamada);
}, 0);
O processamento completo dado pelo SEAJS é o seguinte:
Copie o código do código da seguinte forma:
Função StyleOnLload (nó, retorno de chamada) {
// para IE6-9 e ópera
if (node.attachevent) {
node.attachevent ('somente', retorno de chamada);
// perceber:
// 1.
// Esta situação, a Opera não faz nada, tão fallback ao tempo limite.
// 2.
}
// Pesquisa para Firefox, Chrome, Safari
outro {
setTimeout (function () {
enquete (nó, retorno de chamada);
}, 0);
}
}
Enquete de função (nó, retorno de chamada) {
if (retorno de chamada.iscalled) {
Retornar;
}
var isLloaded = false;
if (/webkit/i.test tostkator.useragent)) {// webkit
if (node ['Sheet']) {
isloaded = true;
}
}
// para Firefox
else if (node ['sheet']) {
tentar {
if (nó ['folha']. cssrules) {
isloaded = true;
}
} Catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
isloaded = true;
}
}
}
if (isloaded) {
// Dê tempo para renderizar.
setTimeout (function () {
ligar de volta ();
}, 1);
}
outro {
setTimeout (function () {
enquete (nó, retorno de chamada);
}, 1);
}
}
// minha função de link de criação dinâmica
Função createLink (cssurl, lnkid, charset, mídia) {{
var head = document.getElementsByTagName ('Head') [0],
linktag = null;
if (! cssurl) {
Retornar falso;
}
linktag = document.createElement ('link');
linktag.setAttribute ('id', (lnkid || 'estilo dinâmico'));
linkTag.SetAttribute ('rel', 'STILESHEET');
linktag.setAttribute ('charset', (charset || 'utf-8'));
linkTag.SetAttribute ('Media', (Media || 'All'));
linktag.setAttribute ('type', 'text/css');
linktag.href = cssurl;
head.appendChild (linkTag);
}
função loadcss () {
Var stylenode = createLink ('/wp-content/themes/bluenight/style.css');
Styleonload (styleenode, function () {) {
alerta ("carregado");
});
}
Quando vi o código dos SEAJs, lembrei imediatamente de outra solução que vi Diego Perini:
Copie o código do código da seguinte forma:
/*
* Copyright (c) 2010 Diego Perini
* Todos os direitos reservados.
*
* CSSREAM.JS -CSS NOTIFICAÇÃO DE ESTADO LOLHADO/PRONTO
*
* Autor: Diego Perini <Diego.perini no Gmail com>
* Versão: 0.1
* Criado: 20100616
* Release: 20101104
*
* Licença:
* //www.vevb.com * Download:
* http://javascript.nwbox.com/cssream/cssream.js
*/
Função cssream (fn, link) {
var d = documento,
t = d.createstestylesheet,
r = t? 'Regras': 'cssrules',
s = t?
l = d.getElementsByByTagName ('link');
// link passou ou último link nó
link ||.
função check () {
tentar {
Link de retorno && link [s] && link [s] [r] && link [s] [r] [0];
} Catch (e) {
Retornar falso;
}
}
(Function poll () {) {
check () && Settimeout (fn, 0) || setTimeout (Poll, 100);
}) ();
}
De fato, se você leu o código de julgamento do evento Domream da jQuery, o princípio é semelhante. É também para determinar se o nó DOM é carregado por rotação pelo setTimeout.
Além disso, o FackBook contém um estilo fixo através do estilo dinâmico de CSS, como#loadcssdom, e o loadcssdom é uma altura do estilo 1px. Em seguida, crie dinamicamente um objeto DOM, adicione esse estilo loadcssdom. Em seguida, o setTimeout perguntou se o loadcssdo tinha uma altura de 1px. Para a solução desse método de processamento, você pode usar "CSSP: carregando CSS com JavaScript e recebendo um retorno de chamada on -line".
O autor de "JavaScript Patterns" Stoyan, em seu blog, explicou em detalhes "quando uma folha de estilo é realmente carregada?".
Depois de assistir a isso, você pode suspirar: Khan, julgando se o CSS está carregado não é tão fácil! De fato, meu aqui é um tubérculo, porque no desenvolvimento, além do CSS de carregamento dinâmico, também precisamos carregar dinamicamente a operação de JavaScript e carregar dinamicamente as operações HTML. , mas antes disso, sugiro olhar para estes:
"Verifique se garante que os JavaScripts/HTML/CSS sejam carregados sob demanda quando necessário", essa biblioteca é tratada especificamente com html de carregamento dinâmico, CSSCRIPT. Como o autor introduziu:
Certifique -se de uma pequena biblioteca JavaScript que fornece uma função útil, certifique -se de que todos.
"Diga ao CSS que o Javavascript está disponível o mais rápido possível"
Depois de assistir a isso, você pode não estar emaranhado: quando você estiver em um estilo de uma página da web que parecerá e funcionará de maneira diferente sobre se o JavaScript está disponível ou não.
Bem, eu disse muito desta vez, espero que seja útil para o desenvolvimento e o aprendizado de todos!