불필요한 로딩 콘텐츠를 피하는 방법

Question

자바 스크립트로 작은 코드를 생성하여 상점 개업 시간을 표시했습니다. 다음은 웹 사이트입니다 : https://tsigaradiko.com. 이것에 문제가있는 경우이다 :

가 나는 그것을 볼 아래 코드 등 매장의 개방 시간에 따라 구성하는 텍스트 내부 (숨김) 및 자바 스크립트를 사용하여 함께 고정 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으로 설정하십시오. 그런 다음 자바 스크립트가 실행되면 적절한 이미지가 표시됩니다.

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