gpt4 book ai didi

javascript - 使用 vanilla javascript 回调和延迟加载 css

转载 作者:行者123 更新时间:2023-11-28 04:08:27 25 4
gpt4 key购买 nike

我想延迟加载一个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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com