我想延迟加载一个CSS文件，然后让JavaScript修改页面在加载CSS之后。为此，我使用 this方法，如下所示:
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”走私，因此浏览器认为在渲染页面的其余部分之前不需要等待文件，这就是重点。这个approach似乎非常标准，上面的代码确实可以工作......大部分。
唯一的问题是回调。它发生在 CSS 加载之后、样式应用到文档之前。
如果我在回调上放置一个计时器，如下所示:
window.setTimeout(function(){
callback();
}, 2000);
然后一切都按照应有的方式运行(只是慢)。
问题是，在运行 callback() 之前，如何才能不仅等待 CSS 加载，而且应用？
最佳答案
根据上面的一些评论，这是我想出的并且效果很好(尽管尚未经过彻底测试):
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> 的计算样式一遍又一遍，直到改变。然后它执行回调。到目前为止，代码从未需要循环多次，因此等待时间是无限小的。
甚至延迟10太多了。代码将延迟 0 运行。并且仍然只循环一次。
编辑:使用此函数代替简单地使用 callback()在上面的例子中。
关于javascript - 使用 vanilla javascript 回调和延迟加载 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46496717/