このCSSファイルがロードされているかどうかを判断する必要があります。今回は、IEブラウザが正常に処理できると言う必要があります。
次のようにコードコードをコピーします。
// seajsへのコードフェスティバル
function styleonload(node、callback){
// IE6-9およびオペラの場合
if(node.attachevent){
node.attachevent( 'のみ、コールバック);
// 知らせ:
// 1。
//この状況では、オペラは何もしないので、タイムアウトへのフォールバック。
// 2。
}
}
残念ながら、今回は他のブラウザでは、CSSがFFをロードしているかどうかを判断するのはそれほど便利ではありません。また、SettimeOutインターバルイベントを使用する必要があります。
次のようにコードコードをコピーします。
// seajsへのコードフェスティバル
関数ポーリング(ノード、コールバック){
if(callback.iscalled){
戻る;
}
var isloaded = false;
if(/webkit/i.test tost tost.com)){// webkit
if(node ['sheet']){
isloaded = true;
}
}
// Firefoxの場合
else if(node ['sheet']){
試す {
if(node ['sheet']。cssrules){
isloaded = true;
}
} catch(ex){
// ns_error_dom_security_err
if(ex.code === 1000){
isloaded = true;
}
}
}
if(isloaded){
//レンダリングの時間を与えます。
setimeout(function(){
折り返し電話 ();
}、1);
}
それ以外 {
setimeout(function(){
Poll(ノード、コールバック);
}、1);
}
}
setimeout(function(){
Poll(ノード、コールバック);
}、0);
Seajsによって与えられる完全な処理はこれです:
次のようにコードコードをコピーします。
function styleonload(node、callback){
// IE6-9およびオペラの場合
if(node.attachevent){
node.attachevent( 'のみ、コールバック);
// 知らせ:
// 1。
//この状況では、オペラは何もしないので、タイムアウトへのフォールバック。
// 2。
}
// Firefox、Chrome、Safariの投票
それ以外 {
setimeout(function(){
Poll(ノード、コールバック);
}、0); //
}
}
関数ポーリング(ノード、コールバック){
if(callback.iscalled){
戻る;
}
var isloaded = false;
if(/webkit/i.test tost tost.com)){// webkit
if(node ['sheet']){
isloaded = true;
}
}
// Firefoxの場合
else if(node ['sheet']){
試す {
if(node ['sheet']。cssrules){
isloaded = true;
}
} catch(ex){
// ns_error_dom_security_err
if(ex.code === 1000){
isloaded = true;
}
}
}
if(isloaded){
//レンダリングの時間を与えます。
setimeout(function(){
折り返し電話 ();
}、1);
}
それ以外 {
setimeout(function(){
Poll(ノード、コールバック);
}、1);
}
}
//私の動的作成リンク関数
function createLink(cssurl、lnkid、charset、media){{
var head = document.getElementsByTagname( 'head')[0]、
linktag = null;
if(!cssurl){
falseを返します。
}
linktag = document.createelement( 'link');
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);
}
関数loadcss(){
var stylenode = createLink( '/wp-content/themes/bluenight/style.css');
styleonload(styleNode、function(){){
Alert( "Loaded");
});
}
Seajsのコードを見たとき、私はすぐにDiego Periniを見た別の解決策を思い出しました:
次のようにコードコードをコピーします。
/*
* Copyright(c)2010 Diego Perini
* 無断転載を禁じます。
*
* cssream.js -CSSロード/準備状態通知
*
*著者:Diego Perini <diego.perini at Gmail com>
*バージョン:0.1
*作成:20100616
*リリース:20101104
*
*ライセンス:
* //www.vevb.com *ダウンロード:
* http://javascript.nwbox.com/cssream/cssream.js
*/
関数cssream(fn、link){
var d = document、
T = D.CreatestyLessheet、
r = t? 'cssrules'、
s = t? 'styleSheet': 'シート'
l = d.getElementsByTagname( 'link');
//渡されたリンクまたは最後のリンクノード
リンク||(link = l.length -1];
function check(){
試す {
リンク&& link [s] && link [s] [r] && link [r] [0];
} catch(e){
falseを返します。
}
}
(function poll(){){
check()&& setimeout(fn、0)||。
})();
}
実際、JQueryのDomreamイベントの判断規範を読んだ場合、原則は似ています。また、DomノードがSettimeout Inquiryを通じてロードされているかどうかも決定されます。
さらに、Fackbookには、#LoadCSSDDOMなどのダイナミックCSSスタイルを通じて固定スタイルが含まれており、LoadCSSDOMは1PXスタイルの高さです。次に、DOMオブジェクトを動的に作成し、このLoadCSDOMスタイルを追加します。その後、SettimeOutはLoadCSSDOの高さが1pxかどうかを尋ねました。この処理方法の解決策については、「CSSP:CSSにJavaScriptをロードしてオンラインコールバックを取得する」を履くことができます。
「JavaScript Patterns」の著者は、彼のブログで、「StyleSheetが本当にロードされているのはいつですか?」と詳細に説明しました。
これを見た後、あなたはため息をつくかもしれません:カーン、CSSがロードされているかどうかを判断するのはそれほど簡単ではありません!実際、私のここには、動的なロードCSSに加えて、JavaScript操作を動的にロードし、動的荷重JavaScriptの関連コンテンツについても動的にロードする必要があるため、私のここにあるブリックがここにあります。 、しかしその前に、私はこれらを見ることをお勧めします:
「JavaScripts/HTML/CSSが必要に応じてオンデマンドでロードされるようにしてください」。このライブラリは、動的荷重HTML、CSScriptで特別に処理されます。著者が紹介したように:
確実に、すべてのものを確実に処理します。
「JavavaScriptができるだけ早く利用可能であることをCSSに伝えてください」
これを見た後、あなたは絡み合っていないかもしれません:あなたがJavaScriptが利用可能かどうかを異なって見たり作業したりするWebページのスタイル部分をスタイルします。
さて、私は今回はたくさん言った、それが皆の発展と学習に役立つことを願っています!