1
私はCSSファイルを読み込むのを怠惰にしてから、をロードした後に、のページをjavascriptで修正したいと思っています。ここに示したようにそのために、私は、thisアプローチを使用しています：コールバックと遅延読み込みCSS with vanilla javascript
lazyLoadCSS = function (pathToStyleSheet, options, callback) {
var stylesheet = document.createElement('link');
stylesheet.href = pathToStyleSheet;
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
// temporarily set media to something inapplicable to ensure
// it'll fetch without blocking render
stylesheet.media = 'only x';
// set the media back when the stylesheet loads
stylesheet.onload = function() {
stylesheet.media = 'all';
// here be callbacks...
callback();
};
document.getElementsByTagName('head')[0].appendChild(stylesheet);
};
ので、アイデアはJavaScriptをCSSを取り出しますが、ブラウザはそれを考えていない「だけx」のようにそれをsmuggles、ありますページの残りの部分をレンダリングする前にファイルを待つ必要があります。これが全体のポイントです。このapproachはかなり標準的なようで、上記のコードは動作しません。
唯一の問題はコールバックです。これは、CSSがロードされた後でスタイルが文書に適用される前に発生します。
私のようなので、コールバックにタイマーを置く場合：
window.setTimeout(function(){
callback();
}, 2000);
をその後、すべてがまさにそれは（のみ遅い）すべきであるように動作します。
質問：CSSをロードするだけでなく、をに適用する前に、callback()を実行するにはどうすればよいですか。
function waitForStylesToApply(cycleNumber, canary, callback){
if(cycleNumber < 100){
window.setTimeout(function(){
var computedValue = window
.getComputedStyle(window.document.body, null)
.getPropertyValue('max-width');
if(computedValue !== canary){
if(typeof callback === 'function'){
console.log('done in ' + cycleNumber + ' cycles');
callback();
}
}
else {
waitForStylesToApply(cycleNumber++, canary, callback);
}
}, 10);
}
}
のチェックを計算したスタイルに<body>のために何度も繰り返し、それまで：上記のいくつかのコメントを1として
レンダリング後にコードを実行する一般的な方法は、遅延値なしで 'setTimeout'を呼び出すことです：' setTimeout（（）=> callback（）） '。それを試してみてください。それがあなたのシナリオのために働くならば、それは十分であるはずです。 – ideaboxer
私はこのようなものに傾いていましたが、ちょっと...シンプルなようでしたか？あまりにも明らかだ？誰かにそれがうまくいくことに同意するのは良いことです。 – crowhill
あなたは 'onIdle'と考えることができます。 AngularJSでもそれを採用して（ '$ timeout'と呼んでいます）、アイドルコールバックをシミュレートするために使用されます。例えば：https://stackoverflow.com/questions/20610450/angularjs-timeout-without-delay-parameters-reason – ideaboxer