Exemple 1: Charger une grande image

Dans cet exemple, une grande image (285kb) doit être chargée. Si vous n'avez pas de connexion internet éclair, vous devriez voir l'image de préchargement au-dessus de l'image et elle disparaîtra une fois que l'image de fond sera chargée.

Exemple 2: Image non trouvée

Dans cet exemple, l'image large.jpg n'a pas été trouvée. Le résultat est une icône de chargement et un texte alternatif. Pour délimiter l'emplacement de l'image nous avons ajouté une légère bordure.

Exemple 3 : Afficher une image avec class (pas de balise div)

Dans cet exemple, la classe .load est appliquée directement à l'image. Si vous avez plusieurs images, que vous souhaitez leur appliquer le même effet et que vous êtes que sûr de l'image que vous devez charger, alors c'est la méthode la plus propre. Notez que puisque la bordure délimitant l'image a été enlevée, on ne peut plus centrer l'image. La raison est que l'image elle-même n'adhérera pas au "margin:0 auto;" ou au "text-align:center;".

Exemple 4 : Afficher une image avec class (pas de balise div) : Image non trouvée

Dans cet exemple, la classe .load a été appliquée directement à l'image, contournant le besoin d'un div, mais il n'y a aucun fichier large.jpg à trouver. Cela aboutit à réduction de l'icône de chargement déplacée dans Firefox (puisque le div ne définit plus la largeur et la hauteur de l'image). Pour délimiter l'image originale nous avons ajouté une légère bordure.

Pour voir comment nous avons réussi tout ceci, regardez le code source !
Notez que les utilisateurs de Safari devront appuyer sur option + command + u pour voir la source, tandis qu'avec Internet Explorer 7, l'utilisateur devra choisir "Voir", "Source" dans la barre d'outils.