11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Cookie pour lancer Anim une seule fois

Bonjour à toutes et à tous,

Nouveau sur le site, nouveau en JS, je viens chercher de l'aide pour un problème assez difficile à formuler.
Après pas mal de recherches, je me permet de créer un "nouveau" sujet.

Je suis sur un site sur lequel il y a un preload, ce preload est un .gif, qui se lance automatiquement lorsqu'on arrive sur la page d'accueil. Mon problème : il se relance à chaque fois que l'on revient sur l'index.... J'ai fait un bout de code pour son apparition et sa disparition, mais aussi pour le cookie (qui ne fonctionne pas).

Voici le code :


<script type="text/javascript">

	$(window).load(function() {

        if (!$.cookie('animation-already-played') {
          
          
          $.cookie('animation-already-played', true);
          
          date = new Date();
        
	        $('<div id="overlay"><img src="img/loader1.gif?' + date.getTime() + '" width="500" /><br /><img src="img/loader2.gif" style="margin-left:170px" /></div>')
	        .css('opacity', '1')
	        .insertBefore('body');
		      
	        window.setTimeout(function() {
	       
		      $(document).ready(function() {
		        
		      $('#overlay').remove();
		        
	        });}, 3200);

	    });
		
		

    </script>


Voilà, Si vous pouvez me guider afin que j'éclaircisse mon problème, ça serai génial.Je commence à prendre un sérieux retard à cause de ça, alors qu'une fois ce problème réglé je pourrais mettre le site en ligne Smiley smile

Merci d'avance et bonne journée. N'hésitez pas s'il manque quelque chose. Pib
Modifié par Pibolo_one (15 Nov 2012 - 11:17)
J'ai vue qu'il y avait une erreur de syntaxe, mais le cookie ne fonctionne toujours pas.... Des idées ?

Nouveau code (situé après le body) :

<script type="text/javascript">
	$(window).load(function() {

		if (!$.cookie('animation-already-played')) {
          
          $.cookie('animation-already-played', true);
                 
          date = new Date();
	}
	  $('<div id="overlay"><img src="img/loader1.gif" width="500" /><br/><img src="img/loader2.gif" style="margin-left:170px"/></div>')
	  .css('opacity', '1')
	  .insertBefore('body');
		  
		  
	  window.setTimeout(function() {
	  
		$(document).ready(function() {
		
	  
		  $('#overlay').remove();
		  
	  
		})}, 3200);

	});
	</script>


Merci Smiley cligne
Salut,

Je ne sais pas si tu peux écrire directement ceci :

$.cookie('animation-already-played', true);


Essaye plutôt ceci :

$.cookie('animation-already-played', 'true');


Pour moi un cookie prends une valeur "text".
Merci Super_baloo8,

Ta solution n'a pas l'air de fonctionner... J'avoue être perdu, je ne vois plus rien à force d'avoir la tête dedans Smiley smile
Cela affichait "null"

J'ai trouvé la solution, mon code donne ceci : 

<script type="text/javascript">
		$(window).load(function() {
	
			// Test si le cookie n'est pas encore présent, ce qui signifie que l'animation n'a pas encore été jouée.
			if (!$.cookie('animation-already-played')) {

				// On cache le corps de la page.
				$('#content').hide(0);
	
				// On créé le cookie pour signifier que l'animation a déjà été jouée.
        $.cookie('animation-already-played', true);
	
				// On créé un objet date qui servira à empêcher de garder la version en cache de l'animation.
				date = new Date();
				// On ajoute l'animation (avec un paramètre dans la source de l'image afin qu'elle soit rechargée à chaque fois et se lance bien du début) et le chargeur
				$('<div id="overlay"><img src="img/loader1.gif" + date.getTime() + '" width="500" /><br /><img src="img/loader2.gif" style="margin-left:170px" /></div>')
				.prependTo('body');
	
				// On définit une minuterie pour masquer l'animation
				window.setTimeout(function() {
	
					// On vérifie que la page est interprétée complètement
					$(document).ready(function() {
	
						// On cache l'animation avec un fade
						$('#overlay').fadeOut(200);
						// On affiche le contenu également avec un fade
						$('#content').fadeIn(2000);
					});
				}, 3200);
	
			}
	
		});
	</script>



Voilà, merci à ceux qui m'ont répondu !
Sujet clos
Aller à