shift-reload in FF gives unexpected results

Question

dear javascript mavins,

I'm presenting a simple animation using img.src replace and the <canvas> tag. At present it's only expected to work in FireFox (FF 3.5.3, Mac OS X 10.5.5), so cross-browser compatibility isn't (yet) an issue.

When the page is first loaded, or loaded into an new window or tab, all seems to work as expected, and the cache behavior on a simple reload does not seem to be an issue; however, if I try to force a reload with shift-reload, I get a problem. Even though the images have been pre-loaded, the preloaded images for the animation don't seem to be available to the browser which then tries to load each new img.src from the server.

Am I looking at a browser bug here, or is there something buggy in my code that I can't see? This is my first shot at implementing a js class, so there might be a lot here that I don't understand.

Any insight from the assembled wise here would be welcome. You can see what I'm talking about at:

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

Thanks,

Jon

Answer 1

When you shift reload you're telling the browser to reload - not from the cache.

So it shouldn't be a surprise that you're getting the images from the server.

Images can be preloaded in javascript with the following code:

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

If you want the images loaded before you use them that might help.

Answer 2

I had a look at your code and you have the following in document.ready()

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

     }
    }


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

the animation = new simAnim line is executed regardless if all 100 images are loaded or not...

One possibility to fix this would be to move that line inside the countLoadedImages function like so:

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

     }
    }

this way that function will be executed once all the images have loaded

Answer 3

Thanks to ekhaled, who tried. I'm now satisfied that this is a browser bug: Mozilla bug #504184

I have a stripped down example at http://neolography.com/staging/shift-reload/shift-reload-testcase.html which I will leave up. I encourage all to vote for this bug in the mozilla bug tracker so that it will get fixed.

j