Traduit de : Création d'un préchargeur d'images CSS
Chinois : préchargement d'images CSS pur
Il existe de nombreuses façons d'implémenter le préchargement d'images, généralement en utilisant Javascript pour faire défiler les choses. Ne soyez plus contraint par le préchargement Javascript, utilisez CSS et vous pourrez précharger vos images sans aucun problème.
Pourquoi utiliser le préchargement
Pourquoi envisageriez-vous d'utiliser le préchargement ? Avez-vous déjà eu un site Web sur lequel vous deviez faire défiler votre navigation, puis il y avait un délai jusqu'à ce que les images soient chargées... hehehe. Le préchargement vous aidera à cet égard. Il chargera ces images lors du chargement de la page et les stockera dans le cache du navigateur. De cette façon, lorsque l'utilisateur fera défiler la navigation, celle-ci sera belle et fluide, sans aucun délai.
Code CSS
Le concept est d'écrire un style CSS pour définir un tas d'images d'arrière-plan, puis de les masquer afin que vous ne puissiez pas voir ces images. Ces images d'arrière-plan sont les images que vous souhaitez précharger.
Voici un exemple :
#préchargeur {
/* Images que vous souhaitez précharger*/
image d'arrière-plan : url (image1.jpg);
image d'arrière-plan : url (image2.jpg);
image d'arrière-plan : url (image3.jpg);
largeur : 0px ;
hauteur : 0px ;
affichage : en ligne ;
}
C'est juste un moyen de masquer vos images afin qu'elles ne soient pas affichées. J'ai également vu des gens utiliser de très grandes valeurs de position d'arrière-plan pour faire sortir les images. Ou donnez une valeur de marge négative. Il existe de nombreuses façons de masquer les images que vous souhaitez précharger, choisissez celle qui vous convient le mieux.
une autre situation
Il n'arrive pas très souvent que vous ayez une image volumineuse à télécharger, si vous suivez l'approche habituelle consistant à fournir une sorte d'indication indiquant que l'image est en cours de chargement. Voici du CSS pour indiquer à l'utilisateur que l'image est en cours de chargement.
img { background : url (loadingHourGlass.gif) sans répétition 50 % 50 % ;
Les images GIF peuvent être animées, comme des ballons de plage sur un Mac ou des sabliers sur un PC. Utilisez une animation pour que l'utilisateur sache que quelque chose se passe.
en conclusion
Faites de votre mieux lorsque le préchargement a du sens, et vos utilisateurs vous apprécieront pour cela. En fait, ils ne le remarqueront peut-être pas, mais c'est une bonne chose, s'ils remarquent que votre site se charge, il est probablement trop lent.
Voir la démo
Notes spéciales sur l'exemple 1
Tout d'abord merci pour les questions soulevées par les internautes dans les commentaires. Après avoir traduit cet article, considérant qu'un même attribut est défini plusieurs fois dans une règle CSS, les navigateurs ne traitent généralement que le dernier, j'ai décidé qu'il fallait faire un test, mais je n'ai pas réalisé ce qui se passait. En raison de la gravité du problème, cela n'a pas été traité à temps, ce qui peut provoquer des malentendus.
D'après mes tests, la plupart des navigateurs ne chargent que la dernière image, et les deux premières images sont ignorées . Mais dans les navigateurs Webkit-core, tels que Chrome, ces trois images seront préchargées. L'exemple 1 nous donne une bonne idée pour résoudre le problème , mais pour pouvoir charger plusieurs images dans le même style CSS, nous devrons peut-être attendre que les multiples attributs d'image d'arrière-plan de CSS3 soient pris en charge par davantage de navigateurs.
PS : Laissez-moi vous expliquer cette démo. Peut-être que l'auteur original n'a pas trop réfléchi et voulait juste démontrer l'effet du préchargement, donc cette page de démonstration était un peu simple : il a juste utilisé l'image préchargée comme arrière-plan d'un:hover, de sorte que lorsque la souris passe dessus il, peut la réalité sans scintillement de cette image. Eh bien, c'est la deuxième utilisation dans l'article...