Question

我使用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

谢谢，

乔恩

Answer 1

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

因此，从服务器获取图像应该不足为奇。

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

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

如果您希望在使用之前加载图片，那可能有所帮助。

Answer 2

我看了你的代码，你在document.ready（）

中有以下内容

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

        }
    }


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

动画=执行新的simAnim行，无论是否加载了所有100张图像......

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

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

        }
    }

这样一旦所有图像都加载了

，就会执行该功能

Answer 3

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

我在http://neolography.com/staging/shift-reload/shift-reload-testcase.html处有一个被剥离的例子，我将离开。我鼓励所有人在mozilla bug跟踪器中投票支持这个错误，以便它得到修复。

Ĵ

FF中的shift-reload会产生意想不到的结果

3 个答案: