Ajouter une icône de chargement pour vos grandes images

| DynamiX Web Design | Alban Lelasseux (traducteur) |

Ce tutoriel vous présentera deux méthodes distinctes pour réaliser un système de préchargement d'images en utilisant uniquement du CSS.

Cet article a été publié à l'origine, le 17 Janvier 2008, en version anglaise et est visible à l'adresse suivante : css: add a “loading” icon to your larger images

- Titre : Ajouter une icône de chargement pour vos grandes images

- Auteurs : DynamiX Web Design, Alban Lelasseux (traducteur)

- Parution : 20 novembre 2008

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2008 DynamiX Web Design. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Introduction

- Étape 1 : Trouvez une image de préchargement

- Étape 2 : Créez le style CSS

- Étape 3 : Appliquer le code

- Compatibilité

- Remerciements

Introduction

Imaginons que vous ayez une grande image (ou plusieurs) sur une page en particulier et que vous vouliez que les visiteurs sachent que l'image est en cours de chargement. Vous pouvez utiliser un peu de JavaScript pour intégrer une image d'attente pour toutes les images qui n'ont pas encore été chargées. Mais, à moins que vous n'en ayez une tonne sur la même page, nous avons une méthode beaucoup plus simple (et plus propre) pour réaliser la même chose.

Étape 1 : Trouvez une image de préchargement

Il existe beaucoup de merveilleux sites qui vous permettront de créer vos propres images de préchargement. Notre favori est ici. Rappelez-vous simplement de ne pas choisir une icône qui serait trop grande (taille du fichier), autrement, elle ne se chargera seulement après que l'image "grand format" soit chargée. Voici celle que nous avons créée :

Étape 2 : Créez le style CSS

Il y a juste un peu de code à créer ici et il peut être collé directement dans votre feuille de style. Soyez certains de remplacer le texte "votreicone.gif" par le nom de votre image.

Code à coller dans votre feuille de style

.load
{
background:url('images/votreicone.gif') no-repeat center;
}

Étape 3 : Appliquer le code

Il existe certainement plusieurs façons de faire, mais je vais vous présenter la meilleure solution, selon moi. Il vous suffit d'encapsuler l'image qui vous intéresse et qui doit être chargée dans un div "load", et de lui appliquer la largeur et la hauteur de votre image.

Exemple

<div class="load" style="width:200px;height:200px">
<img src="large.jpg" alt="texte alternatif" />
</div>

Ici, cette méthode est appliquée à une image : exemple

Comme cela a été mentionné par le contributeur Lim Chee Aun vous pouvez aussi contourner le div et appliquer la classe .load directement à l'image elle-même, et voici comment vous pouvez faire :

<img src="large.jpg" alt="texte alternatif" class="load" style="width:200px; height:200px" />

Nous n'avions pas mentionné cette idée au départ, car si l'image ne se charge pas, cela peut affecter la structure du design. Si vous êtes optimiste, que vous ne vous préoccupez pas des questions de chargement et que vous ne vous souciez pas du fait que l'image doit être centrée (selon la validation XHTML Strict) ou si vous appliquez la classe à plusieurs images, cela peut être une solution plus propre pour vous. Voir notre page d'exemples, mise à jour, ci-dessous pour voir les deux méthodes.

Voir le résultat final en action !

Si cette solution ne résout pas le problème pour votre utilisation, laissez-nous voir ce que vous faites différemment et nous nous ferons un plaisir d'aller plus en détail.

Compatibilité

Cette méthode a été testée et est compatible avec Internet Explorer 5.5, 6, 7, Firefox (PC et Mac), Netscape et Safari (PC et Mac).

Remerciements

Tous mes remerciements à Antoun pour sa relecture.