Travaux pratiques
TROISIÈME PARTIE
136
Masquer les images
Masquer un élément dans un document web consiste à ne pas le représenter. Deux
déclarations CSS sont disponibles à cet effet : visibility: hidden et display:
none. Elles diffèrent en ceci :
• visibility: hidden masque l’objet mais réserve sa position et ses dimensions.
L’élément occupe donc de l’espace sur la page.
• display: none fait abstraction complète de l’objet dans le média concerné (Web,
impression, etc.). Tout se passe comme s’il n’existait pas.
Nous recourrons à la deuxième solution, qui ne crée pas de vides dans le document.
Application à une image
Pour la précharger, il suffit d’appliquer à une image la propriété CSS display:
none :
On assurera le chargement prioritaire de cette image en plaçant ce code au tout début
du document, juste sous la balise . L’attribut alt vide, important, évite aux
navigateurs en mode texte ou pour non voyants de tenir compte de cette image.
Cette méthode, convenable pour des cas particuliers ou isolés, peut être adaptée pour
des ensembles d’images.
Application à un ensemble d’images
Quand il s’agit de précharger plusieurs images simultanément, il est préférable
d’extraire les styles CSS de leurs balises pour les placer en dehors du code. La première solution consiste à doter chaque image d’une classe cache :

HTML



CSS
.cache {display: none;}