2016-12-28 76 views
2

我用javascript創建了一個小代碼來顯示商店的開放時間。這裏是網站:https://tsigaradiko.com如何避免不必要的加載內容

opening

我用裏面的文字(隱藏),並使用JavaScript固定的div我使其可見取決於開放時間如下面的代碼店:這裏的問題是,如果您點擊頂部的不同鏈接,在顯示正確圖像(關閉或打開)之前,您可以在幾毫秒內看到兩幅圖像都已經過濾。有沒有辦法通過一個小的預加載器圖標來防止這種情況?

<!-- HTML --> 

    <span class=" open3 "><span class="zin" > <img title="Our shops are now open!" 
      src="https://tsigaradiko.com/wp-content/themes/zerif-lite/images/open-sign.png"> 
     </span></span> 
    <span id="closed" class=" closed3" <span class="zin" > 
<img title="Our shops are now closed!" 
    src="https://tsigaradiko.com/wp-content/themes/zerif-lite/images/closed-sign.png"> 
     </span> 
     <script> 
    //js 
    var da = new Date(Date.now()); //days 

    var month = new Date(); //month 
    var date = new Date(); //date 

    if (da.getDay() === 0) { //sunday, Tsigaradiko is closed 
     $(".closed3").show(); 
     $(".open3").hide(); 
    } 
</script> 

回答

2

是。在css中將它們設置爲display:none。然後當JavaScript運行時,它會顯示正確的圖像。

.open3, .closed3 { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- HTML --> 
 

 
<span class="open3"> 
 
    <span class="zin"> 
 
    <img title="Our shops are now open!" src="https://tsigaradiko.com/wp-content/themes/zerif-lite/images/open-sign.png"> 
 
    </span> 
 
</span> 
 
<span id="closed" class="closed3"> 
 
    <span class="zin"> 
 
    <img title="Our shops are now closed!" src="https://tsigaradiko.com/wp-content/themes/zerif-lite/images/closed-sign.png"> 
 
    </span> 
 
</span> 
 
<script> 
 
    //js 
 
    var da = new Date(Date.now()); //days 
 

 
    var month = new Date(); //month 
 
    var date = new Date(); //date 
 

 
    if (da.getDay() === 0) { //sunday, Tsigaradiko is closed 
 
    $(".closed3").show(); 
 
    } 
 
    else{ 
 
    $(".open3").show(); 
 
    } 
 
</script>