À ce moment, j'ai trouvé deux options, pour résoudre ce problème: Le src initial de toutes les images doit être une image vierge de la base de données 64
Cette option nécessite non seulement un navigateur moderne, mais elle peut être plus lente du côté client car le navigateur doit décoder en base 64 les données d'image afin de produire l'image.
Le src initial de toutes les images doit être l'url d'une image vierge 1x1
C'est une décision correcte à condition que l'URL d'image vide pour tous les emplacements d'image soit exactement la même URL et qu'elle ait une longue durée de vie de cache définie dans l'en-tête HTTP "cache-control". Le problème avec cela est que lorsque les nouveaux fichiers d'image se chargent, les carrés d'image sautent à la nouvelle taille, ce qui pourrait rendre l'expérience utilisateur moins merveilleuse.
L'idée presque parfaite est la suivante ...
Au démarrage de la page, présentez une grille avec des cases de taille fixe pouvant accueillir chaque image. C'est correct si la grille entière ne tient pas sur l'écran. Créez ensuite du javascript qui s'exécute après le chargement du HTML, et dans ce javascript, créez un nouvel élément d'image et attachez-le à chaque cellule de la grille, puis définissez la source de l'image dans le fichier image correct. Faites-le jusqu'à ce que le premier écran se remplisse. puis détectez le défilement dans javascript, puis lorsque le défilement se produit, répétez le processus ci-dessus pour les nouvelles cellules.
Maintenant, si vous voulez le meilleur des meilleurs et que la qualité n'est pas une préoccupation majeure, alors ce que je recommande (que j'ai également implémenté sur mon site) est de construire une grille et de la définir de telle sorte que l'image d'arrière-plan de cette grille soit un feuille de sprite de toutes les images formatées en carrés d'images. Cette méthode est flexible et rapide à charger car une seule demande est requise pour toutes les images.
Voici un modèle HTML à utiliser si vous souhaitez suivre la voie rapide. Deux demandes seulement sont faites. Le code HTML et l'image unique. Dans ce code, je suppose que chaque image de la feuille a une largeur de 100 pixels et une hauteur de 200 pixels et que chaque image est parfaitement alignée l'une à côté de l'autre sans aucun espace.
<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>
Dans mon code, j'ai ajouté 3 points. Cela signifie que vous pouvez continuer à ajouter des images en incrémentant les nombres et en incrémentant la position de 100 à chaque fois à condition que votre feuille de sprite ne comporte qu'une seule ligne d'images. En outre, avec certains navigateurs tels que Opera, vous devrez peut-être ajouter un signe négatif devant les valeurs de position d'arrière-plan pour les faire fonctionner.