Le preload conciste à charger tes images pendant la pages et ainsi éviter le chargement au survol. Tu as deux manières de le faire, soit par javascript, soit par la CSS. Etant assez axé accessibilité j’évite au maximum le javascript, je preload donc mes images avec la XHTML/CSS.
Exemple :
tu as trois liens : css - xhtml - modx que tu utilises avec images/images de survol. Tu sais qu’il va falloir chargé les images de survol. La technique sans js conciste à les chargé dans ta page.
<div class="preload">
<p>Ne pas prendre en compte les elements suivants.</p>
<img src="image_css_survol.png" alt="Hors contenu" />
<img src="image_xhtml_survol.png" alt="Hors contenu" />
<img src="image_modx_survol.png" alt="Hors contenu" />
</div>
Puis ta CSS
.preload {
display: none;
}
Ainsi les images se chargeront mais ne s’afficheront pas dans le navigateur. Le message en paragraphe servira aux navigateurs textes et autres navugateurs alternatifs. Cette méthode est bien sur à utiliser avec peu d’images, si tu as à faire un preload sur beaucoup d’images il va falloir avoir recours à javascript.
PS : pour le js un petit coup de Google t’amenera vers un max de scripts, à toi de choisir le tient si tu ne sais pas le faire
