CSSファイルがロードされていると判断するJsの具体的な実装_javascriptスキル

CSS ファイルが読み込まれたかどうかを判断するには、各ブラウザのメソッドが大きく異なります。今回は、IE ブラウザは、onload メソッドを直接使用して、CSS が読み込まれた後の処理を処理できます。 >

コードをコピー コードは次のとおりです:

// seajs
function styleOnload へのコードの抜粋(node, callback ) {
// IE6-9 および Opera の場合
if (node.attachEvent) {
node.attachEvent('onload', callback);
// 注意:
// 1 . "onload" はファイルが 404 の場合に IE6-9 で起動されますが、
// この状況では Opera は何もしないため、タイムアウトにフォールバックします。
// 2. "onerror"どのブラウザでも起動しません!
}
}

残念ながら、今回は他のブラウザでは CSS が読み込まれているかどうかを判断するのはあまり便利ではありません。FF と Webkit では、node.sheet.cssRules 属性が存在するかどうかで CSS が読み込まれているかどうかを判断できます。そして、setTimeout 間隔イベント ポーリングを使用する必要があります:

コードをコピー コードは次のとおりです:

// seajs のコード抜粋
function poll(node, callback) {
if (callback.isCalled) {
return;
}
var isLoaded = false;
if ( /webkit/i .test(navigator.userAgent)) {//webkit
if (node['sheet']) {
isLoaded = true;
}
}
// for Firefox
else if (node['sheet']) {
try {
{> // ns_error_dom_security_err
if (ex.code === 1000) {
isloaded = true ;
}
🎜>}
{ // レンダリングする時間を与えます。
setTimeout(function() {
callback();
}, 1);
}
else {
setTimeout(function() {
ポーリング(ノード, コールバック);
}, 1);
}
}

setTimeout(function() {
ポーリング(ノード, コールバック);
}, 0);
SeaJS によって与えられる完全な処理は次のとおりです:




コードをコピー

コードは次のとおりです:

function styleOnload(node, callback) {
// IE6-9 および Opera の場合
if (node.attachEvent) {
Node.attachEvent('onload', callback);
// 注意:
// 1. ファイルが 404 の場合、IE6-9 では「onload」が起動されますが、
// この状況では、Opera は何もしないため、タイムアウトにフォールバックします。
// 2. 「onerror」はどのブラウザでも起動しません!
}
// Firefox、Chrome、Safari のポーリング
else {
setTimeout(function() {
ポーリング(ノード、コールバック);
}, 0); // キャッシュ用
}
}
function poll(node, callback) {
if (callback.isCalled) {
return;
}
var isLoaded = false;
if (/webkit/i.test(navigator.userAgent)) {//webkit
if (node['sheet']) {
isLoaded = true;
}
}
// Firefox の場合
else if (node['sheet']) {
try {
if (node['sheet'].cssRules) {
isLoaded = true;
}
} catch (ex) {
// NS_ERROR_DOM_SECURITY_ERR
if (ex.code === 1000) {
isLoaded = true;
}
}
}
if (isLoaded) {
// レンダリングする時間を与えます。
setTimeout(function() {
callback();
}, 1);
}
else {
setTimeout(function() {
poll(node, callback);
}, 1);
}
}
// 我的アニメーション态创建関数LINK数
function createLink(cssURL,lnkId,charset,media){
var head = document.getElementsByTagName('head')[0],
linkTag = null;

if(!cssURL){
return 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);
}
functionloadcss(){
var styleNode = createLink('/wp-content/主題/BlueNight/style.css');

styleOnload(styleNode,function(){
alert("loaded");
});
}

在seajs的代码的候，我立刻想起了我看到ディエゴ・ペリーニ的另一个解法案：

复制代码代码如下:

/*
* Copyright (C) 2010 Diego Perini
* All Rights Reserved.
*
* cssready.js - CSS ロード済み/準備完了状態の通知
*
* 著者: Diego Perini
* バージョン: 0.1
* 作成日: 20100616
* リリース: 20101104
*
* ライセンス:
* http://www.jb51.net * ダウンロード:
* http://javascript.nwbox.com/cssready/cssready.js
*/
function cssReady(fn, link) {
var d = document,
t = d.createStyleSheet,
r = t ? 'rules' : 'cssRules',
s = t ? 'styleSheet' : 'sheet',
l = d.getElementsByTagName('link');
// 渡されたリンクまたは最後のリンク ノード
link || (link = l[l.length - 1]);
function check() {
try {
return link && link[s] && link[s][r] && link[s][ r][0];
} catch(e) {
return false;
}
}
(関数poll() {
check() && setTimeout(fn, 0) ) || setTimeout(poll, 100);
})();
}

また、jQuery の domready イベントが渡されたかどうかを判断するコードも原理は同様です。setTimeout 通知によって DOM のロードが完了したかどうかが判断されます。 CSS の形式には、#loadcssdom などの固定の形式が含まれており、loadcssdom の高さは 1px の形式になります。その後、DOM オブジェクトが作成され、このloadcssdom 形式が追加されます。その後、setTimeout がloadcssdoの高さが1pxを超えたかどうかを確認します。处理この方法の解決策、大家可以下《CSSP: JavaScript による CSS の読み込み – そして onload コールバックの取得。》
そして《JavaScript パターン》の作成者 Stoyan 在他的博客里，比较详细的说明了《いつスタイルシートは本当に読み込まれていますか？》。
これらを見て完了しました、おそらく感銘を受けます：汗、CSS が完全に追加されているかどうかを判断してください。今のところ真ではありません。これは簡単です！これは公開中のため、CSS の自動追加を除いて、更要动态追加JavaScript，动态追加HTML的操作，有空我也会写关链接的动态追加JavaScript的相关内容，不过在那之前，我建议你看看这これら：
《ensure – JavaScript/HTML/CSSを保証する必要に応じてオンデマンドでロードされます》、これは、HTML、CSS、JavaScript を自動的に追加する処理です。 JavaScript、HTML、CSS をオンデマンドで実行し、コードを実行します。 www.jb51.net は、関連する JavaScript と HTML スニペットがブラウザ DOM に存在することを確認してから、それらを使用するコードを実行します。
《JavaScript ができるだけ早く利用可能であることを CSS に伝えます》
見終わりましたら、可能です。就不会纠结: JavaScript が利用可能かどうかに応じて、見た目や動作が異なる Web ページの一部をスタイル設定しているとき。和学习有帮助！