Decaps' crypt

Encore du travail ?

Preloading d'images avec CSS

Imaginons que nous avons ceci :

  1. #my_link { background: url(img.png); }
  2. #my_link:hover, #my_link:focus { background: url(img_2.png); }

Lorsque l'événement "hover" sera déclanché, il y aura un temps de décalage entre l'action et l'affichage de la nouvelle image. Ce temps est le temps que le navigateur mettra pour récupérer cette image. 

Pour éviter ce décalage, il est possible de précharger les images que l'on veut, en ajoutant dans votre HTML : 

  1. <div id="preloader">
  2.     <img src="img_2.png" alt="img_2">
  3. </div>
Et dans votre CSS :
  1. #preloader {
  2.     height:1px;
  3.     width:1px;
  4.     overflow:hidden;
  5.     position:absolute;
  6.     top:-1000px;
  7. }

Vous pouvez bien sûr ajouter autant d'images que vous avez besoin dans #preloader.

Feed the troll :

Nom :
Site : (facultatif)
Captcha : Captcha
Commentaire :
Balises BBCode autorisées
[b]flideli[/b]
[i]flideli[/i]
[url]flideli[/url]
[url=foo]flideli[/url]
[size=foo]flideli[/size]
[color=foo]flideli[/color]
[code]flideli[/code]

Le saviez-vous ? Refresh saviez_vous Loading

VDM Refresh vdm Loading