切换样式表闪烁 [英] switch stylesheet flicker

问题描述

我有一个包含2个样式表的网站，一个用于白天，一个用于夜间阅读。我用 onclick 事件来调用一个函数来更改样式表。问题是，对于新来的访问者，当他们第一次点击按钮时，页面会变成完全没有样式的（即没有样式表），只需半秒钟，然后新的访问者就会进入。我知道这是发生的原因是我删除将当前表格的 rel =样式表添加到新表格中。有什么方法可以改进功能，即使对于新的访客也不会有短暂的延迟？感谢。

I have a site with 2 stylesheets, one for day and one for night reading. I have an image with an onclick event to call a function to change the stylesheet. The problem is, for new visitors, when they first click the button, the page goes to completely unstyled (i.e. no stylesheet) just for half a second, then the new one kicks in. I know the reason this is happening is that I remove the rel="stylesheet" of the current sheet before adding it to the new one. Is there any way I can improve the function so that there is no brief delay, even for new visitors? Thanks.

function changeStyleSheet() {
    var a = document.getElementById('stylesheet1');
    var b = document.getElementById('stylesheet2');
    var now1 = $(a).attr('rel');
    var now2 = $(b).attr('rel');
    if (now1 == 'stylesheet') {
        a.setAttribute('rel', 'alt-stylesheet');
        b.setAttribute('rel', 'stylesheet');
    } else {
        b.setAttribute('rel', 'alt-stylesheet');
        a.setAttribute('rel', 'stylesheet');
    }
};

推荐答案

您是否尝试切换设置属性的顺序？

Have you tried switching the order of setting the attributes? Like set the rel attribute of the stylesheet you are switching to first and then set the rel attribute of the stylesheet you are switching away from after?

将rel属性设置为样式表在HTML中，当页面加载使用JavaScript将其中一个改为其他样式表。

Set both rel attributes to stylesheet in the HTML, and when the page loads use javascript to change one of them to alternative stylesheet.

这篇关于切换样式表闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！