Relancer la lecture d'un gif
On va voir ici comment relancer une lecture d'un gif animé.
En prérequis, ce dernier ne doit donc pas s'exécuter en boucle. Il doit se jouer nombre limité de fois, comme 1 fois.
Pour faire cela, comme montré dans l'article 3782, quand on crée le gif avec ffmpeg, on utilise l'option -loop -1
Ensuite, pour relancer la lecture du gif, la technique ici utilisée consiste à réinjecter l'emplacement du gif dans la balise img avec du jquery.
Dans l'exemple ci-dessous, on a 2 balise img qui jouent chacune un gif. Elles portent l'id gifTest1 et gifTest2.
<img id="gifTest1" class="gifArticle" src="LeGif01.gif"><br />
<img id="gifTest2" class="gifArticle" src="LeGif02.gif"><br />
De là le code jquery attend que l'on click dessus. Pour cela il regarde si un clic a lieu sur toutes les balises img qui portent le nom gifTest
$( "img[id*='gifTest']" ).click(function() {Quand le click arrive, on récupère l'emplacement du gif avec $(this).attr('src')
et on le réinjecte dedans avec $(this).attr('src', 'l emplacement du gif');
$(this).attr('src', $(this).attr('src'));<!DOCTYPE html>
<HTML lang="fr">
<HEAD>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" />
<!-- Pour que l'affichage s'adapte bien sur les smartphones -->
<!-- https://www.alsacreations.com/astuce/lire/1177-Une-feuille-de-styles-de-base-pour-le-Web-mobile.html -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>
</HEAD>
<BODY>
<img id="gifTest1" class="gifArticle" src="LeGif01.gif"><br />
<img id="gifTest2" class="gifArticle" src="LeGif02.gif"><br />
<SCRIPT TYPE="text/javascript">
$(function() {
$( "img[id*='gifTest']" ).click(function() {
console.log( $(this).attr('id') );
console.log( $(this).attr('class') );
console.log( $(this).attr('src') );
$(this).attr('src', $(this).attr('src'));
} );
});
</script>
</BODY>
</HTML>Article(s) précédent(s)
Article(s) en relation(s)