0

我有一个我在 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 片段重新清除后重新加载缓存的样子：

缓存

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

4

2 回答 2

1

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

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

于 2013-03-14T19:58:08.780 回答
0

你做错了——

在 for 循环中创建图像对象时，请在闭包函数中执行此操作，否则前一个对象将被最后一个对象覆盖，其本质是异步的 -

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

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

于 2013-03-14T19:58:01.793 回答