Comment puis-je jouer une seule fois à l'animation?

Question

Je remplace un fichier jpg par un fichier gif animé lorsque le conteneur div apparaît dans la fenêtre. Ça marche. Important: le fichier gif n'a pas de boucle. Mon problème: lorsque vous faites défiler à nouveau, même un peu, vers le haut ou vers le bas, le remplacement joue à nouveau. Existe-t-il une solution simple pour arrêter cet événement après le premier remplacement? Merci

jQuery(document).ready(function($){ 
 
\t 
 
\t var $window = $(window); 
 
\t var $elem = $(".animated") 
 

 
\t \t function isScrolledIntoView($elem, $window) { 
 
\t \t \t var docViewTop = $window.scrollTop(); 
 
\t \t \t var docViewBottom = docViewTop + $window.height(); 
 

 
\t \t \t var elemTop = $elem.offset().top; 
 
\t \t \t var elemBottom = elemTop + $elem.height(); 
 

 
\t \t \t return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
 
\t \t } 
 

 

 
\t $(document).on("scroll", function() { 
 
\t \t if (isScrolledIntoView($elem, $window)) { 
 
\t \t \t $("#graph1").attr("src","images/graphsSECHE_500x500_noloop2.gif"); 
 
\t \t } 
 
\t \t 
 
\t }); 
 
});

Answer 1

Initialiser une valeur booléenne à la charge de page, par exemple:

var played = false; 

Vérifiez ensuite si votre animation comme cela a déjà été joué, et ne pas oublier de fait définir le vrai à l'intérieur du si par:

if (isScrolledIntoView($elem, $window) && played === false) { 
    $("#graph1").attr("src","images/graphsSECHE_500x500_noloop2.gif"); 
    played = true; 
}