我该怎么做才能让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]，图像的实际图像数据不会被预加载并且它完全破坏了效果，因为实际图像数据加载AFTERWARDS，仅在需要显示时才显示。发生这种情况是因为最后一个链接http://www.iill.net/wp-content/uploads/images/hot-chick.jpg不是图像的直接链接。如果您转到该链接，您的浏览器会将您重定向到ACTUAL位置。现在，我在Chrome中的图像预加载代码运行得非常好，效果看起来很棒。因为Chrome似乎预先加载了实际数据 - 即要显示的EVENTUAL图像。这意味着在Chrome中如果我预装了一个将重定向到“停止窃取我的带宽”的图像，那么预加载的图像就是“停止窃取我的带宽”。如何修改我的代码以使Firefox的行为方式相同？

已邀请:

3 个回复

搜洼挂时

我建议使用带有子li元素的ul，其中包含相关图像。使用display: none（或者，position: absolute离开页面）设置ul的样式，浏览器仍然可以加载图像，无论用户基本上看不到它们。使用当前代码的一种稍微混乱的方式，在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中测试过它。

bab

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

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

现在，在您的Javascript中，加载图片：

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

然后你可以将这个img放在div中。

屡倒雷图

我认为你在这个问题上是错误的〜无论你采用什么方法最终都可能被图像主持人所反对。为什么不将副本保存到您控制的主机？那说，你可以试试

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

这可能会让FireFox缓存图像。

要回复问题请先登录或注册

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

3 个回复

发起人

preloading

image_preloader

hotlinking

问题状态

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

与内容相关的链接

3 个回复

发起人

preloading

image_preloader

hotlinking

问题状态