2

我有一个关于加载基于一天中的时间或日期更改 CSS 的 JavaScript 的问题。

问题：如何缓存图像以使它们不会从一个页面加载到另一个页面？该脚本工作正常，并根据一天中的时间将类添加到正文和标题中。但是，当用户单击网站的下一页时，它会重新加载相同的 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

4

2 回答 2

4

你最好的办法是把它作为你身体的第一件事，然后去掉window.onload. 您需要稍微调整您的 css，以便您只更改以下上的类body：

.sunrise_bg #header_masthead{

而不是在#header_masthead.

然后TimeOfDaySiteChange()作为你身体的第一件事跑步。

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

或者，如果您使用的是 html5，则可以更改代码以将类添加到html元素中，并将 javascripthead放在文档的早期。这可能会稍微快一些。

于 2013-04-29T15:00:36.880 回答
1

每次用户从一个页面转到另一个页面时，是否有办法阻止脚本加载？

In short, no. Your current implementation dynamically adds classes (based on the time of day) with Javascript. You need the Javascript to run on every page in order for the classes to be added.

You can use the method as suggested by James https://stackoverflow.com/a/16281934/2174104 to minimise the time it takes for the function to run, but there is no way to load the background colour once and keep it if your site uses separate html documents.

于 2013-04-29T15:07:53.007 回答