Ajouter une icône de chargement pour vos grandes images

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.

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 :

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.

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

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.

<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.

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).

Tous mes remerciements à Antoun pour sa relecture.