1

我正在使用img.src替换和<canvas>标签呈现一个简单的动画。目前它只适用于 FireFox（FF 3.5.3、Mac OS X 10.5.5），因此跨浏览器兼容性（还）不是问题。

当页面首次加载或加载到新窗口或标签时，一切似乎都按预期工作，并且简单重新加载时的缓存行为似乎不是问题；但是，如果我尝试使用 shift-reload 强制重新加载，我会遇到问题。即使图像已经预加载，动画的预加载图像似乎对浏览器不可用，然后浏览器尝试从服务器加载每个新的 img.src。

我是在这里查看浏览器错误，还是我的代码中有一些我看不到的错误？这是我第一次实现 js 类，所以这里可能有很多我不明白的地方。

欢迎来自这里聚集的智者的任何见解。你可以看到我在说什么：

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

谢谢，

乔恩

4

3 回答 3

2

当您重新加载时，您是在告诉浏览器重新加载 - 而不是从缓存中加载。

因此，您从服务器获取图像也就不足为奇了。

可以使用以下代码在 javascript 中预加载图像：

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

如果您希望在使用它们之前加载图像，这可能会有所帮助。

于 2009-10-16T21:03:09.283 回答
0

我查看了您的代码，您在 document.ready() 中有以下内容

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

        }
    }


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

无论是否加载了所有 100 个图像，都将执行 animation = new simAnim 行...

解决此问题的一种可能性是将该行移动到 countLoadedImages 函数中，如下所示：

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

        }
    }

这样，一旦加载了所有图像，该功能就会被执行

于 2009-10-17T02:06:44.227 回答
0

感谢ekhaled，他试过了。我现在很满意这是一个浏览器错误： Mozilla bug #504184

我在http://neolography.com/staging/shift-reload/shift-reload-testcase.html有一个精简的例子，我会留下来。我鼓励所有人在 Mozilla 错误跟踪器中为这个错误投票，以便它得到修复。

j

于 2009-10-17T21:13:16.230 回答