不要な読み込みコンテンツを避ける方法

Question

私はjavascriptで小さなコードを作成して、店舗の営業時間を表示しています。ここにウェブサイト：https://tsigaradiko.comがあります。このように問題があればである：

は、私はそれが目に見える以下のコードのような店舗の営業時間に依存するテキスト内の（隠れている）、および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> 

Answer 1

はい。それらを両方とも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>