如何避免不必要的加载内容

Question

我用javascript创建了一个小代码来显示商店的营业时间。这是网站：https://tsigaradiko.com。

我使用了一个带有文本的静态div（隐藏），并使用javascript我可以看到它取决于商店的营业时间，如下面的代码：问题是，如果你点击一个不同的链接在显示正确的图像（关闭或打开）之前，您可以在几毫秒内看到两个图像也都可以显示。有没有办法用一个小的预加载器图标来阻止它？

 <!-- 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>