recharge par décalage FF donne des résultats inattendus

Question

je présente une animation simple en utilisant img.src et remplacer l'étiquette <canvas>. À l'heure actuelle, il est seulement prévu de travailler dans FireFox (FF 3.5.3, Mac OS X 10.5.5), donc la compatibilité entre navigateurs n'est pas (encore) un problème.

Lorsque la page est d'abord chargé ou chargé dans une nouvelle fenêtre ou onglet, tout semble fonctionner comme prévu, et le comportement du cache sur un rechargement simple ne semble pas être un problème; Cependant, si j'essaye de forcer un rechargement avec shift-reload, j'ai un problème. Même si les images ont été préchargées, les images préchargées pour l'animation ne semblent pas être disponibles pour le navigateur qui essaie alors de charger chaque nouvelle img.src à partir du serveur.

Suis-je à la recherche d'un bug de navigateur ici, ou est-il buggy quelque chose dans mon code que je ne vois pas? C'est ma première tentative d'implémentation d'une classe js, il y a peut-être beaucoup de choses que je ne comprends pas.

Toute idée de la sage assemblée serait le bienvenu ici. Vous pouvez voir ce que je parle à:

http://neolography.com/staging/mrfm/spin-sim.html

Merci,

Jon

Answer 1

Merci à ekhaled, qui ont essayé. Je suis maintenant satisfait que c'est un bug de navigateur: Mozilla bug #504184

J'ai un exemple dépouillé à http://neolography.com/staging/shift-reload/shift-reload-testcase.html que je vais laisser. J'encourage tout le monde à voter pour ce bug dans le logiciel de suivi des bugs mozilla afin qu'il soit corrigé.

j

Answer 2

Lorsque vous passez rechargerez vous indiquez au navigateur pour recharger - et non à partir du cache.

Il ne devrait pas être une surprise que vous obtenez les images du serveur.

Les images peuvent être préchargées en javascript avec le code suivant:

img = new Image(); 
img.src = "your/image/path"; 

Si vous voulez que les images chargées avant de les utiliser qui pourrait aider.

Answer 3

j'ai eu un coup d'œil à votre code et vous avez les éléments suivants dans document.ready()

function countLoadedImages() { 
     loadedImgs++; 
     if (loadedImgs == images.length){ 
      $("#loading-image").hide(); 
      $("#controls").fadeIn(100); 

     } 
    } 


    animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata)); 

l'animation = nouvelle ligne Simanim est exécutée, peu importe si les 100 images sont chargées ou non ...

Une possibilité de résoudre ce problème serait de déplacer cette ligne dans la fonction countLoadedImages comme ceci:

function countLoadedImages() { 
     loadedImgs++; 
     if (loadedImgs == images.length){ 
      $("#loading-image").hide(); 
      $("#controls").fadeIn(100); 
      animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata)); 

     } 
    } 

cette manière que la fonction sera exécutée une fois toutes les im âges ont chargé