Javascript 如何让Mozilla Firefox预加载最终的图像结果？

我正在尝试使用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以同样的方式运行？

为什么不在页面上放置一个没有源代码的图像，并将其隐藏：

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

---

然后，您可以稍后将此img放在div中。

为什么不在没有源的页面上放置一个图像，并将其隐藏：

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

---

然后，您可以稍后将此img放在div中。

我认为您在这个问题上的立场是错误的~无论您采用何种方法，最终都可能会遭到图像宿主的反对。 为什么不将副本保存到您控制的主机上

也就是说，你可以试试

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

---

这可能会让FireFox缓存图像。

我认为你在这个问题上站错了立场~无论你采用什么方法，最终都可能会遭到图像主机的反击。 为什么不将副本保存到您控制的主机上

也就是说，你可以试试

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

---

这可能会让FireFox缓存图像。

我建议对包含相关图像的child

li

元素使用

ul

。将

ul

样式设置为显示：无（或者，

position:absolute

将其从页面上移除），并且图像仍应通过浏览器加载，而不管其本质上对用户不可见

使用您当前的代码，下面的相关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]);
}

var-imageArray=new-Array（）；
imageArray[0]=新图像（）；
imageArray[1]=新图像（）；
imageArray[2]=新图像（）；
imageArray[3]=新图像（）；
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";
//以下是新的内容：
var newList=document.createElement（'ul'）；
setAttribute（'id'，'imgPreload'）；
var preload=document.getElementById（'preload'）；
preload.appendChild（newList）；
var imgPreload=document.getElementById（'imgPreload'）；
var li=document.createElement（'li'）；
对于（i=0；i我建议将
ul
与包含相关图像的child
li
元素一起使用。将
ul
样式设置为
显示：无
（或者，
位置：绝对
将其移出页面）而且图像仍然应该由浏览器加载，而不管它们本质上对用户是不可见的

使用您当前的代码，下面的相关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]);
}

var-imageArray=new-Array（）；
imageArray[0]=新图像（）；
imageArray[1]=新图像（）；
imageArray[2]=新图像（）；
imageArray[3]=新图像（）；
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";
//以下是新的内容：
var newList=document.createElement（'ul'）；
setAttribute（'id'，'imgPreload'）；
var preload=document.getElementById（'preload'）；
preload.appendChild（newList）；
var imgPreload=document.getElementById（'imgPreload'）；
var li=document.createElement（'li'）；
对于（i=0；i