comment charger un img inséré dynamiquement d'abord

Question

Je construis une page d'accueil pour un site web avec des animations jquery. Mon problème est: parfois (avant que la page et les images ne soient mises en cache par le navigateur) les images se chargent dans un ordre qui nuit à la qualité de l'animation.

Ok, voici ce que je faisais: le div conteneur a le code CSS suivant: background:url(images/colorcity.png) si js est activée je superpose une <img> échelle de gris sur colorcity, dont l'opacité est animée à 0 pour une belle « fade à la couleur » effet. pour ce faire, je l'utilise: $("#container").prepend('<img src="images/greycity.png" class="grey" />')

Ce que j'ai essayé de le faire, est en quelque sorte obtenir cette image Prepended être la première chose à afficher sur la page, comme il sera « cache » d'autres images utilisées dans l'animation . Malheureusement, toutes mes tentatives ont échoué.

Je suppose que c'est un problème commun et est probablement une question à répétition, mais je ne pouvais pas trouver une réponse après une heure ou deux de regarder. Donc, désolé si je suis un Noob lol.

Merci d'avance pour toute aide.

La page: http://roughgiraffed.com/barrandbarrbags/

Answer 1

Essayez d'inclure ceci à ou près du haut de votre page:

<img src="images/greycity.png" style="display: none;" /> 

Cela devrait forcer l'image à charger assez tôt. Si c'est toujours un problème faites votre animation dans le rappel load() plutôt que ready(), pour vous assurer que toutes vos images seront chargées.

Très belle page, d'ailleurs (et ça a l'air de bien fonctionner sous firefox).