JavaScript,将相同的图像源设置为不同的图像(预加载)
JavaScript, set same image source to different images (preload)
抱歉,标题可能不正确..
我有下一个问题:我想用进度条进行预加载。我卡在了一个问题上。
[代码 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' 还是直接从缓存中获取?
或更好地这样做 [代码 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。但是它会降低我的应用程序的速度吗?或者更好地使用代码 2?提前致谢。
两种方法各有利弊。
第一种方法在图像元素上要轻得多,一般来说,生成的 DOM 元素越少越好。但是,有可能浏览器不会根据加载的信息量提供缓存中的图像。最坏的情况是,如果浏览器已从缓存中删除图像,您将需要再次从网络获取。
第二种方法更安全,会将图像保存在内存中,这意味着即使浏览器不缓存它,它仍然可用。不过,它在图像元素上更重。
哪种解决方案更好取决于您的情况。如果您不加载大量图像,我认为解决方案 1 是更好的选择,因为它利用了浏览器的缓存。但是,如果您真的负担不起从网络上重新加载图像的费用,则解决方案 2 更安全。
TL;博士
解决方案 1 不应减慢您的应用程序,但解决方案 2 将确保您不会再次从网络获取。
对于代码 1,您的预加载器将毫无用处,对吗?我会选择 2
抱歉,标题可能不正确.. 我有下一个问题:我想用进度条进行预加载。我卡在了一个问题上。
[代码 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' 还是直接从缓存中获取?
或更好地这样做 [代码 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。但是它会降低我的应用程序的速度吗?或者更好地使用代码 2?提前致谢。
两种方法各有利弊。
第一种方法在图像元素上要轻得多,一般来说,生成的 DOM 元素越少越好。但是,有可能浏览器不会根据加载的信息量提供缓存中的图像。最坏的情况是,如果浏览器已从缓存中删除图像,您将需要再次从网络获取。
第二种方法更安全,会将图像保存在内存中,这意味着即使浏览器不缓存它,它仍然可用。不过,它在图像元素上更重。
哪种解决方案更好取决于您的情况。如果您不加载大量图像,我认为解决方案 1 是更好的选择,因为它利用了浏览器的缓存。但是,如果您真的负担不起从网络上重新加载图像的费用,则解决方案 2 更安全。
TL;博士 解决方案 1 不应减慢您的应用程序,但解决方案 2 将确保您不会再次从网络获取。
对于代码 1,您的预加载器将毫无用处,对吗?我会选择 2