2

時刻または日付に基づいて CSS を変更する JavaScript の読み込みについて質問があります。

質問: ページからページへと読み込まれないように画像をキャッシュするにはどうすればよいですか? スクリプトは正常に動作し、時刻に基づいてクラスを本文とヘッダーに追加します。ただし、ユーザーが Web サイトの次のページをクリックすると、同じ 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 に答える