Passer au contenu

Concevoir des animations plus fluides

Solution : en plaçant les différentes images dans le cache du navigateur.

Dans une page HTML, on crée une animation en affichant une succession d’images. Or, il ne sera jamais possible d’obtenir une animation fluide si les images sont téléchargées au fur et à mesure de leur affichage. Il faut donc toutes les rapatrier simultanément, ne pas les visualiser et les placer dans une zone de mémoire cache. L’exemple proposé ci dessous décrit la technique à mettre en ?”uvre . En premier lieu, créez, à l’aide de l’accessoire Paint, six images au format GIF que vous baptiserez : img0.gif, img1.gif …img5.gif. Recopiez le listing ci-après et sauvegardez-le sous le nom Image.htm dans le même répertoire que les images. Un double clic sur son nom le lance dans le navigateur. Deux boutons placés sur la page permettent de démarrer et d’arrêter l’animation. Ici, la technique consiste à désigner les images voulues, non pas par leur nom réel, mais par leur adresse (URL) qui est dans cet exemple img[i].src. Ces images ont déjà été chargées à l’aide des instructions contenues dans la boucle : elles se trouvent donc dans le cache du navigateur et seront par conséquent affichées instantanément.Listing :




onClick=”if (tempo == null) anime()”>
onClick=”if (tempo) clearTimeout(tempo); tempo=null;”>

🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.


Alain Coupel