1

我正在尝试使用 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 似乎预加载了实际数据 - 要显示的 EVENTUAL 图像。这意味着在 Chrome 中，如果我预加载了一个将重定向到“停止窃取我的带宽”的图像，那么预加载的图像就是“停止窃取我的带宽”。

如何修改我的代码以使 Firefox 以相同的方式运行？

4

3 回答 3

1

我建议使用包含相关图像的ul子元素。li样式化ulwith display: none（或者，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]);
}

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

于 2011-02-26T23:35:03.070 回答
0

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

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

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

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

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

于 2011-02-26T23:30:15.243 回答
0

我认为你在这个问题上是错误的~无论你用什么方法，最终都可能被图片的主人反击。为什么不将副本保存到您控制的主机？

也就是说，你可以试试

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

这可能会让 FireFox 缓存图像。

于 2011-02-26T23:31:25.927 回答