Question

我有一个关于加载JavaScript的问题，该JavaScript会根据时间或日期更改CSS。

问题：如何缓存图像以使它们不会在页面之间加载？脚本工作正常，并根据一天中的时间将类添加到正文和标题。但是，当用户单击网站的下一页时，它会重新加载相同的CSS类，并导致网站在加载CSS之前闪烁为白色。

我已将脚本放在页面底部和标题中。然而，它仍然会在加载脚本的每个页面上闪烁。每次用户从一个页面到另一个页面时都会阻止脚本加载吗？

这是Js代码。

function TimeOfDaySiteChange() {
    var d = new Date();
    var n = d.getHours();

    if (n < 5) {
        // midnight
        night();
    } else if (n > 16 && n < 20) {
        // If time is between 5PM &ndash; 8PM sunset theme to 'body'
        dusk();
    } else if (n > 19) {
        // If time is 8PM 
        night();
    } else if (n > 8) {
        // If time is 9AM
        daytime();
    } else {
        // Else use 'dawn' theme
        dawn();
    }
}

function dawn() {
    jQuery('body').addClass('sunrise_bg');
    jQuery('#header_masthead').addClass('sunrise_masthead_bg');
}

function daytime() {
    jQuery('body').addClass('day_bg');
    jQuery('#header_masthead').addClass('day_masthead_bg');
}

function dusk() {
    jQuery('body').addClass('sunset_bg');
    jQuery('#header_masthead').addClass('sunset_masthead_bg');
}

function night() {
    jQuery('body').addClass('night_bg');
    jQuery('#header_masthead').addClass('night_masthead_bg');
}

function init() {
    TimeOfDaySiteChange();
}

window.onload = init;

我还试过没有window.onload

Answer 1

您最好的选择是将此作为您体内的第一件事并移除window.onload。您需要稍微调整一下css，以便只更改body上的课程：

.sunrise_bg #header_masthead{

而不是#header_masthead上的课程。

然后运行TimeOfDaySiteChange()作为你体内的第一件事。

使用onload，您正在等待整个页面加载，然后再申请您的课程。

或者，如果您使用的是html5，则可以更改代码以将该类添加到html元素，并将您的javascript尽早放入文档的head。这可能会稍快一些。

Answer 2

是否存在阻止每次用户加载脚本的问题从一页到另一页？

简而言之，没有。您当前的实现使用Javascript动态添加类（基于一天中的时间）。您需要在每个页面上运行Javascript才能添加类。

您可以使用James https://stackoverflow.com/a/16281934/2174104建议的方法来最小化函数运行所需的时间，但是如果您的站点使用单独的html文档，则无法加载一次背景颜色并保留它

根据日期或时间更改CSS

2 个答案: