JavaScript,将相同的图像源设置为不同的图像(预加载)

时间:2016-01-07 15:16:49

标签: javascript preloader

对不起,也许不是正确的标题.. 我有下一个问题:我想用进度条进行预加载。我坚持一个问题。

[代码1]:

//Preloader code
var img = [];
img[0] = new Image();
img[0].src = 'test0.jpg';
img[0].onload = function(){
  //some code
}
//.....
img[100] = new Image();
img[100].src = 'test100.jpg';
img[100].onload = function(){
  //some code
}

//.....
//  all images loaded
//.....
/*
for expample  in this part of code I need put my image 'test0.jpg' into html
*/
var temp_img = new Image();
temp_img.src = 'test0.jpg';

问题是:它会再次下载'test0.jpg'还是从缓存中取出?

或者更好地做这个 [CODE 2]

//Preloader code
var img = [];
img['test0'] = new Image();
img['test0'].src = 'test0.jpg';
img['test0'].onload = function(){
  //some code
}
//.....
img['test100'] = new Image();
img['test100'].src = 'test100.jpg';
img['test100'].onload = function(){
  //some code
}

//.....
//  all images loaded
//.....
/*
for expample in this part of code I need put my image 'test0.jpg' into html
*/
var temp_img = img['test0'];
// draw temp_img

我想使用CODE 1.但它会减慢我的应用程序吗?或者更好地使用CODE 2?提前谢谢。

2 个答案:

答案 0 :(得分:0)

这两种方法都有其优点和缺点。

第一种方法在图像元素上要轻得多,作为一般规则,生成的DOM元素越少越好。但是,有可能浏览器不会根据加载的信息量从缓存中提供图像。最糟糕的情况是,如果浏览器已从缓存中删除了图像,则需要再次从网络中获取。

第二种方法更加安全,可以将图像保存在内存中,这意味着即使浏览器没有缓存它,它仍然可用。但是,它在图像元素上更重。

哪种解决方案更好取决于您的情况。如果您没有加载大量图片,我说解决方案1是更好的选择,因为它利用了浏览器的缓存。但是,如果你真的无法从网络上重新加载图像,那么解决方案2就更安全了。

TL; DR 解决方案1不应该减慢您的应用程序速度,但解决方案2将确保您不会再次从网络中获取。

答案 1 :(得分:0)

使用代码1,您的预加载器是无用的吗?我选择2