C'est une mauvaise nouvelle pour ce dernier cas (nombreux gifs animés qui bougent simultanément sur la meme page).
Comment résoudre le problème alors:?
Le concept en général est de servir l'utilisateur avec une image statique ( fixe) et n'autoriser le gif animé de bouger qu'après un clic dessus l'image. Suivez donc ce petit tutoriel expliquant la méthode pour faire ça:
D'abord, on doit commencer par créer un projet contenant un fichier HTML, le jQuery et enfin un fichier JavaScript qui inclut notre code édité.On peut lier le fichier jQuery à un CDN ou on procède à la récupération de la copie et la lier ensuite à notre répertoire du projet. Vous pouvez jouer avec les styles CSS selon vos goûts. La partie la plus importante est celle qui contient la balise HTML, la voici:
<figure>Vous allez constater que la présence d'un attribut data-alt supplémentaire dans la section img. Après le code data-alt, il y a le code représentant le gif animé qui va remplacer l'image statique servie initialement.Vous pouvez faire plus de configuration en ajoutant encore des images avec leur légendes via l’élément figcaption.
<img src="img/mobile-wireframe.png" height="300" width="400" alt="Static Image" data-alt=
"img/mobile-wireframe.gif">
</figure>
<!-- add more images -->
Après ça, on va éditer notre code JavaScript qui va surement apporter de la magie ;).L'idée générale est d'activer le Gif lorsque l'utilisateur clique sur l'image.
Le JavaScript:
L'idée vient de récupérer le chemin de l'image GIF que nous avons déjà inséré après l'attribut data-alt. Nous allons suivre chacune des images puis utiliser la méthode jQuery.data() ,commençons alors:
var getGif = function() {Nous allons exécuter la fonction et enregistrons la sortie dans un gif variable comme dans le code ci dessus. La variable gif va contenir le chemin du GIF qui résulte des images de la page.
var gif = [];
$('img').each(function() {
var data = $(this).data('alt');
gif.push(data);
});
return gif;
}
var gif = getGif();
L'image en "Pre-loading"
Un problème de chargement du Gif se présente alors: avec le GIF pas encore chargé, il y a une chance que le GIF animé ne soit pas lu ou exécuté instantanément (A savoir que le navigateur a besoin de quelques temps pour charger complètement le GIF).Ce retard de chargement serait donc plus long lorsque la taille de l'image GIF est grande.
Nous allons devoir charger ou précharger les GIF simultanément pendant le chargement de la page.Voyons le code ci dessous:
// Preload all the GIF.Ouvrez maintenant les DevTools (les utilitaires de développement), puis cherchez l'onglet Réseau ( ou Ressources).Vous allez constater que les GIF sont déjà chargés bien qu'ils sont sauvés dans l'attribut data-alt.Pour ce faire suivez ce code ci dessous:
var image = [];
$.each(gif, function(index) {
image[index] = new Image();
image[index].src = gif[index];
});
Vous allez constater que code va intervertir la source de l'image entre l'attribut src où l'image statique est servie et l'attribut data-alt où nous fournissons originellement l'image GIF.
Lorsque l'utilisateur cliquera une seconde fois pour arrêter l'animation, Le code reviendra également à l'image statique.
$('figure').on('click', function() {C'est tout, vous pouvez à la fin affiner la page en y ajoutant quelques styles comme un bouton de lecture sur l'image pour donner l’impression à l'utilisateur que l'image est "jouable".
var $this = $(this),
$index = $this.index(),
$img = $this.children('img'),
$imgSrc = $img.attr('src'),
$imgAlt = $img.attr('data-alt'),
$imgExt = $imgAlt.split('.');
if($imgExt[1] === 'gif') {
$img.attr('src', $img.data('alt')).attr('data-alt', $imgSrc);
} else {
$img.attr('src', $imgAlt).attr('data-alt', $img.data('alt'));
}
});
Enregistrer un commentaire