根據日期或時間的日期或時間更改CSS

我有一個關於加載基於一天中的時間或日期更改CSS的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

來源

2013-04-29 DSA Web Specialists

你有沒有試過把你的代碼放在文檔就緒函數中？ – martincarlin87 2013-04-29 15:00:09

您不需要向#header_masthead添加類，只需執行body.sunrise_bg #header_masthead {} – powerbuoy 2013-04-29 15:01:41

關於flash;在JS加載之前，運行並最終添加一個類，瀏覽器將顯示默認頁面。我會在服務器端添加類。 – powerbuoy 2013-04-29 15:02:55

你最好的選擇將是把這個作爲你的身體的第一件事，取下window.onload。你會需要稍微調整你的CSS，所以你只改變了body類：

.sunrise_bg #header_masthead{

而不是在#header_masthead一類。

然後運行TimeOfDaySiteChange()作爲你體內的第一件事。

通過使用onload您正在等待整個頁面加載，然後再應用您的課程。

或者，如果你使用HTML5，你可以改變你的代碼的類添加到html元素，並在文檔的head早期把你的JavaScript。這可能會稍微快一點。

來源

2013-04-29 15:00:36

將它作爲''中的第一項並且將'html'而不是'body'用於選擇器會不會更好？ – Ian 2013-04-29 15:03:08

@我不認爲這是在html4中有效，但似乎在html5中。 – 2013-04-29 16:53:32

什麼是無效的？給''元素一個'class'？ – Ian 2013-04-29 16:54:28

是否有防止每次用戶加載腳本從頁面到頁面？

總之，沒有。您當前的實現動態地使用Javascript添加類（基於一天的時間）。您需要在每個頁面上運行Javascript才能添加類。

您可以使用James https://stackoverflow.com/a/16281934/2174104建議的方法來最小化函數運行所花費的時間，但是如果您的站點使用單獨的html文檔，則無法加載一次背景顏色並保留它。

來源

2013-04-29 15:07:53 sd7syfsk

根據日期或時間的日期或時間更改CSS

回答

相關問題