Le contenu visible change à un intervalle de temps défini - mais le contenu précédent s'affiche ensuite en clignotant.

Question

Je suis en train de construire un exemple de menu hébergé sur le web qui sera divisé en plusieurs blocs de contenu. Certains contenus changeront à un moment précis de la journée (menu du petit déjeuner au déjeuner). Le contenu change au moment voulu, mais quelques secondes plus tard, le contenu précédent réapparaît de manière clignotante plusieurs fois sur une période de 1 à 2 minutes avant de s'arrêter.

$( 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  && 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

Comme indiqué précédemment, je parviens à faire changer le contenu au moment voulu, mais le contenu précédemment visible (et maintenant ce qui devrait être caché) continue à réapparaître après quelques secondes (généralement en clignotant). Mon objectif est de faire en sorte qu'une fois le contenu modifié, ce clignotement ne se produise pas et que le contenu ne change pas jusqu'à la prochaine fois.

Answer 1

Sur votre site web, vous avez placé le script en dehors du corps, ce qui pose problème.

J'essaierais d'ajouter ce css pour que lorsque la page se charge, les deux soient cachés immédiatement parce que jquery ne se charge pas et ne s'exécute pas avant le CSS.

.day, .night{display:none;}