Pourquoi le préchargement de l'image est-il inefficace?

Question

Mon projet de CMS a un écran de connexion web 2.0 élégant qui s'estompe sur l'écran en utilisant javascript. Comment se fait-il que même si je suis sûr à 120% que les images sont préchargées (j'ai utilisé le moniteur de ressources dans les outils de développement), elles prennent encore une seconde pour apparaître lorsque mon écran de connexion apparaît. Il détruit complètement la fantaisie! Jetez un coup d'oeil:

http://www.dahwan.info/Melior (lien cassé)

Lorsque vous cliquez sur connexion, l'écran est censé disparaître à l'obscurité en utilisant une image 1px alpha 75% .png. Même si l'image est préchargée, elle n'apparaît qu'une fois l'animation terminée. Cependant, si vous cliquez sur Annuler et que vous vous reconnectez, l'animation se déroule harmonieusement et parfaitement.

Quelqu'un peut-il penser à une solution à ce problème? Je l'ai aussi avec le reste de l'interface graphique de mon CMS. C'est comme s'il n'y avait pas d'image de préchargement quoi que ce soit.

Merci pour les réponses

EDIT: Ah oui, je développe actuellement ce CMS pour Google Chrome 5.0.375.99, en ajoutant la compatibilité multi-navigateur ultérieurement. Désolé pour avoir omis cela

Answer 1

J'ai trouvé une solution à mon problème. Je l'ai maintenant testé dans trois navigateurs sur deux ordinateurs différents avec des résultats parfaits. En bref, dans ma fonction de préchargement d'image en javascript, j'ai ajouté chacune des images dans le DOM dans un tag Div invisible.

$('#img_preload').append($('<img />').attr('src', img.src)); 

Les images ajoutées maintenant au Dom à la charge de la page, et selon ma théorie de repos dans la mémoire de mes ordinateurs bas de gamme, ils apparaissent instantanément quand mon CMS a besoin d'eux.

Merci pour vos commentaires :)

Answer 2

L'unité d'exécution de l'interface utilisateur ne peut gérer qu'une seule tâche à la fois: elle exécute javascript ou met à jour l'interface utilisateur. S'il y a beaucoup d'analyse/exécution de javascript avant le code qui précharge l'image, cela peut être à l'origine du délai.

Une autre suggestion consiste à désactiver la cliquabilité sur le lien de connexion jusqu'à ce que l'image ait été détectée sur la page.

Pour ce faire est assez simple:
fonction disableBtn (el) {var
BTN = document.getElementById (el);
var btnId = btn.id;
btn.disabled = true;
}

Pour réactiver, définissez btn.disabled = false (après avoir détecté que votre image a été ajoutée au DOM).

Answer 3

Vous pouvez aussi simplement les précharger dans un tableau. Votre problème peut être causé par ce que l'on appelle «garbage collection». C'est là que le navigateur recherche les objets qui consomment de la mémoire et qui n'ont plus d'instance sur l'écran et qui ne sont référencés par aucun autre élément en mémoire.

Si vous préchargez des images dans votre ère Web, elles doivent cependant être chargées dans le cache. Ainsi, ils devraient toujours réapparaître lorsqu'ils sont référencés à nouveau. Toutefois, les images peuvent également disparaître si l'expiration du cache n'est pas définie pour une durée suffisamment longue pour ces types de fichiers.Votre problème pourrait également être spécifique au navigateur .... J'ai trouvé qu'il est toujours préférable de créer une "ancre" pour le contenu pré-chargé en les plaçant dans un tableau d'image, puis en utilisant le tableau pour appeler les images si nécessaire à la place de l'URL de l'image (URI).

Voici un article rapide qui traite de ce sujet.

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

Answer 4

Une des informations utiles sur ce problème:

La solution codemonkey fonctionne parce que, en plaçant les images dans un div caché, le navigateur doivent garder ces images en mémoire et prêt pour un changement possible de la visibilité de div. Si l'utilisateur doit changer de visibilité de div de hidden à block, cela doit être fait instantanément. C'est pourquoi il suffit de charger toutes les images dans un tableau ne fonctionne pas correctement.