Comment précharger les images afin qu'elles chargées plus rapidement partout ailleurs sur la page, et est-il une bonne pratique?

Question

Voici la chose: j'ai une carte Google avec beaucoup de marqueurs dans ce

.

Le problème est que les charges de carte, reste vide un peu de temps et alors seulement marqueurs sont affichés. Les marqueurs sont PNGs personnalisés.

Mon idée est de « pré-charge » les (pas sûr que c'est le mot juste) de sorte qu'ils apparaissent presque en même temps que la carte.

Ce que je l'ai fait jusqu'à présent est d'ajouter les mêmes images que j'utilise sur ma carte, en dehors de la carte, plus tôt dans la page display:none;

Je ne suis pas sûr, mais il semble que le temps entre la carte et les images sont affichées a été réduit.

Est-ce la meilleure façon de le faire, et est-il une bonne pratique?

Answer 1

Vous pouvez utiliser « sprites » à savoir une collection d'images séparées sur 1 seul .png. Cela confirme l'avantage de ne nécessiter qu'une une charge à savoir des charges moins distinctes. Google GWT pousse cette technique un lot (à savoir des groupes d'images).

La valeur de cette technique augmente avec le nombre d'images discrètes qui nécessitent chargement:. Les images plus distinctes, plus il faut pour les charger

Answer 2

Ne pas utiliser display:none pour précharger. Du fait un ensemble d'éléments à display:none ne rend pas any de ses attributs physiques, le navigateur ne prend pas la peine de le télécharger jusqu'à ce qu'il soit rendu visible.

Une autre solution consiste à utiliser visibility:hidden, mais vous courez le risque de courir dans un agent utilisateur qui fait à peu près la même chose. visibility:hidden exige que le navigateur calcule le modèle de boîte pour l'image, ce qui nécessite que l'image est chargée (pour obtenir les dimensions). Je ne crois pas que cela fonctionne dans IE6, cependant.

La dernière technique (et mon préféré) est de créer un div directement avant votre balise de </body>. Positionnez-le avec absolu left: -99999999px; top: -99999999px. Le navigateur est obligé de rendre les images (et par conséquent de les charger) et il n'y pas Javascript désordre est à traiter.

Maintenant, pour intégrer votre problème, mettez le code de votre carte Google après votre "pré-charge div". Votre navigateur sera obligé de charger les images avant d'exécuter le code pour créer la carte. Cela devrait résoudre votre problème.

Hope this helps!

Answer 3

D'après ce que je me souviens de la plupart des navigateurs modernes, les images sont toujours une fois chargées (compte tenu de la src de l'image est le même). Je suppose que vous voulez dire les charger avant que la charge de cartes.

À mon avis en ne compte pas vraiment beaucoup. Les marqueurs devraient être relativement faible par rapport à l'image de la carte elle-même et je ne peux pas vraiment les utiliser sans la carte de toute façon.

Si vous pensez que vous améliorer l'expérience utilisateur alors je pense qu'il est une bonne pratique, mais je vais essayer de les obtenir sur une base plus propre chemin, sans doute un appel ajax au début de la charge page?

Jetez un oeil à Ajax En action: Images préchargement