Javascript不缓存图像

Question

我有一个我在phototshop（一个加载轮）制作的gif，但我发现我使用它的方式（隐藏然后用css显示并稍后使用javascript进行编写）实在是太迟了，它一开始真的很难。所以我决定在调用它之前缓存图像。所以这就是我做到的：

function preloadImages(array) {
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.src = array[i];
        preloadImages.list.push(img);
    } 
}

var imageURLs = [
    "loading.gif"
];

哪个应该有用，如果我没有弄错的话。但以防万一我也尝试过：

loading = new Image(60,60)
loading.src = "images/loading.gif"

我从教程中提取。 现在当我实现它（当前是第一个）然后正常调用图像时，它似乎运行得更快，我可以在缓存中看到它。然而，作为怀疑论者，我决定放入一个我从未在HTML中使用的图像，看看它是否被缓存（应该如此），但从不调用它。所以继承我的新JS：

function preloadImages(array) {
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.src = array[i];
        preloadImages.list.push(img);
    } 
}

var imageURLs = [
    "loading.gif",
    "today.gif"
];

注意我在today.gif中添加了现在，如果我对缓存的理解是正确的，那么现在应该缓存此图像，即使我从未在我的“原始”HTML中调用它正确吗？好吧不是。这让我想知道加载的gif是否被缓存，或者我的浏览器是否只是决定合作一点。有任何想法吗？继续使用第二个javascript片段进行重新加载后重新加载缓存的样子：

所以这里的问题是：即使缓存说它不是，它是否正常工作？我在想象吗？我这样做是正确的/我对本地缓存的理解是否正确？如果没有，有人可以向我解释我哪里出错了吗？欢呼声。

Answer 1

您定义的函数需要将数组作为参数。

试试preloadImages(["images/loading.gif", "images/today.gif"]);。目前你缺少关闭引号而没有传递数组，而是两个单独的字符串作为参数。

Answer 2

你做错了 -

在for循环中创建图像对象时，在闭包函数中执行它，或者前一个对象将被最后一个对象覆盖，其性质是异步 -

(function(i){
var img = new Image();
img.src= array[i];}(i))

另外，你创建一个列表并将对象推送到它是完全没用的！