Блог

Я создаю пример веб-меню, которое будет разбито на несколько блоков контента. Некоторое содержимое будет меняться в установленное время суток (меню от завтрака до обеда). Содержимое меняется в соответствующее время, но через несколько секунд предыдущее содержимое снова появляется в виде мигания несколько раз в течение 1-2 минут, прежде чем остановиться.

 $( document ).ready(function() {  
    SetImage();
    window.setInterval(SetImage,1000);
});

function SetImage(){     
    var nowdate = new Date() ;
    
    var waketime = new Date();     
    waketime.setHours(6);
    waketime.setMinutes(30);
    
    var bedtime = new Date();     
    bedtime.setHours(12);
    bedtime.setMinutes(00);
    
    if(waketime < nowdate  amp;amp; nowdate < bedtime){
         $('.day').show();
         $('.night').hide();
    }else{
         $('.night').show();
         $('.day').hide();
    }
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col content">
	<img class="day" src="images/img05.jpg"/>
	<img class="night" src="images/img07.jpg"/>
</div>
<div class="col sidebar">
	<img class="day" src="images/img06.jpg"/>
	<img class="night" src="images/img08.jpg"/>
</div>  

http://damianzannini.com/HTH/index5.html

Как указывалось ранее, я могу изменить контент в соответствующее время, но ранее видимый (и теперь то, что должно быть скрыто) контент продолжает появляться через несколько секунд (обычно мигающий). Моя цель — сделать так, чтобы после изменения контента это мигание не происходило, и контент не менялся до следующего назначенного времени.

На вашем веб-сайте вы помещаете скрипт за пределы тела, что является проблемой.

Я бы попробовал добавить этот css, чтобы при загрузке страницы оба сразу скрывались, потому что jquery не загружается и не запускается до того, как это сделает CSS.

 .day, .night{display:none;}