重新加载样式表在 Chrome 中流畅，但在 Firefox 中很奇怪 (jQuery)

Question

我正在使用以下代码在用户进行选择时重新加载样式表：

<link type="text/css" id="main_style" href="css/style.php" rel="stylesheet">

<button id="secret_1" style="display:none;"></button>

$(document).ready(function(){
function freshStyle(stylesheet){
   $('#main_style').attr('href',stylesheet);
}
$('#secret_1').click(function(event){
    event.preventDefault();
    var restyled = 'style.php?v='+Math.floor(Math.random() * 10000); 
    freshStyle(restyled);
});
});

在 Chrome 中，重新加载很流畅，过渡看起来很棒。在 Firefox 中，在新样式表处于活动状态之前，网站会暂时变成乱码（样式表正在重新加载时）一秒钟。

这是可以用代码解决的问题，还是只是 Firefox 浏览器的一个功能？

Answer 1

如果加载新样式表并在新样式表生效后删除旧样式表，应该不会再出现无样式格式的闪烁

注意：我已经取消了 .ready 中的 jquery，因为我真的不知道如何做 jQuery 中发生的很多事情 - 香草 JS 所有适合我的方式（但如果你觉得更舒服，你可以转换为 jquery）

$(document).ready(function() {
    function freshStyle(stylesheet) {
        const id = 'main_style';
        const main = document.getElementById(id);
        const sibling = main.nextElementSibling;
        const parent = main.parentElement;
        
        const style = document.createElement('link');
        style.rel = 'stylesheet';
        style.href = stylesheet;

        style.onload = () => {
            // load fires BEFORE style is applied - so delay a tick
            setTimeout(() => {
                // remove the old stylesheet
                main.remove();
                // set the id of the new sheet to the removed one
                style.id = id;
            }, 0);
        };
        // this just ensures the new stylesheet ends up exactly where the old was
        parent.insertBefore(style, sibling);
    }
    document.getElementById('secret_1').addEventListener('click', (e) => {
        e.preventDefault();
        const restyled = `style.php?v=${Math.floor(Math.random() * 10000)}`; 
        freshStyle(restyled);
    });
});

重新加载样式表在 Chrome 中流畅，但在 Firefox 中很奇怪 (jQuery)

Reloading stylesheet is fluid in Chrome, but weird in Firefox (jQuery)

javascript

css

jquery

reload