我该怎么做才能让 Mozilla Firefox 预加载最终的图像结果？

Question

我正在尝试使用 JavaScript 预加载图像。我已声明一个数组，如下所示，其中包含来自不同位置的图像链接：

var imageArray = new Array();
imageArray[0] = new Image();
imageArray[1] = new Image();
imageArray[2] = new Image();
imageArray[3] = new Image();
imageArray[0].src = "http://www.bollywoodhott.com/wp-content/uploads/2008/12/arjun-rampal.jpg";
imageArray[1].src = "http://labelleetleblog.files.wordpress.com/2009/06/josie-maran.jpg";
imageArray[2].src = "http://1.bp.blogspot.com/_22EXDJCJp3s/SxbIcZHTHTI/AAAAAAAAIXc/fkaDiOKjd-I/s400/black-male-model.jpg";
imageArray[3].src = "http://www.iill.net/wp-content/uploads/images/hot-chick.jpg";

我使用此数组执行的图像淡入淡出和变换效果对于前 3 个图像正常工作，但对于最后一个图像，imageArray[3]，图像的实际图像数据没有被预加载，它完全破坏了效果，因为实际的图像数据是在之后加载的，似乎只在需要显示的时候加载。

发生这种情况是因为最后一个链接 http://www.iill.net/wp-content/uploads/images/hot-chick.jpg 不是图像的直接链接。如果您访问该链接，您的浏览器会将您重定向到实际位置。现在，我在 Chrome 中的图像预加载代码运行得很好，而且效果看起来很棒。因为 Chrome 似乎预加载了实际数据 - 要显示的事件图像。这意味着在 Chrome 中，如果我预加载的图像将重定向到“停止窃取我的带宽”，那么预加载的图像就是“停止窃取我的带宽”。

我如何修改我的代码以使 Firefox 表现出相同的行为？

Answer 1

我建议将 ul 与包含相关图像的子 li 元素一起使用。使用 display: none 设置 ul 样式（或者，使用 position:absolute 离开页面），并且图像仍应由浏览器，无论它们本质上对用户来说是不可见的。

JS Fiddle 中说明了使用当前代码的一种稍微混乱的方法，相关的 JS下面：

var imageArray = new Array();
imageArray[0] = new Image();
imageArray[1] = new Image();
imageArray[2] = new Image();
imageArray[3] = new Image();

imageArray[0].src = "http://www.bollywoodhott.com/wp-content/uploads/2008/12/arjun-rampal.jpg";
imageArray[1].src = "http://labelleetleblog.files.wordpress.com/2009/06/josie-maran.jpg";
imageArray[2].src = "http://1.bp.blogspot.com/_22EXDJCJp3s/SxbIcZHTHTI/AAAAAAAAIXc/fkaDiOKjd-I/s400/black-male-model.jpg";
imageArray[3].src = "http://www.iill.net/wp-content/uploads/images/hot-chick.jpg";

// the below stuff is the new:

var newList = document.createElement('ul');
newList.setAttribute('id', 'imgPreload');

var preload = document.getElementById('preload');
preload.appendChild(newList);
var imgPreload = document.getElementById('imgPreload');

var li = document.createElement('li');

for(i=0; i<imageArray.length; i++){
    imgPreload.appendChild(li).appendChild(imageArray[i]);
}

显然上面并没有隐藏创建的ul，但是演示展示了动态创建它的一种方法。不可否认的是，到目前为止我只在 Chrome 中测试过它。

Answer 2

为什么不在没有来源的页面上放置一个图像，然后隐藏它：

<img src='' id='preLoadImage1' style='display: none' />

现在，在 Javascript 中，加载图像：

document.getElementById('preLoadImage1').src = '';

然后您可以稍后将此 img 放入 div 内。

Answer 3

我觉得你在这个问题上是站错了一边的~无论你用什么方法，最后都可能会被图主反驳。
为什么不将副本保存到您控制的主机上？

也就是说，您可以尝试

<img src="hotlink" style="visibility:hidden;position:absolute;margin-top:-1000px;" />

这可能会让 FireFox 缓存图像。