Javascript图像转换器的问题

[imwinner]

最近在学Javascript，看一本《Javascript基础教程》的书，其中有个“图像转换器”的例子，原书代码如下图：



我现在搞不懂为什么在setupRollover()函数中要新建三个Image()对象，然后把三个图像文件地址赋给这三个对象的"src"属性，最后再重新赋给this.src。

我现在直接用三个变量存储图像地址，然后赋给this.src，同样能达到效果，代码如下：

function setupRollover(thisImage){
var overSrc = "img/" + thisImage.id +"_on.gif";
thisImage.onmouseover = function(){
this.src = overSrc;
}
var clickSrc = "img/" + thisImage.id +"_click.gif";
thisImage.onclick = function(){
this.src = clickSrc;
}
var outSrc = "img/" + thisImage.id +"_off.gif";
thisImage.onmouseout = function(){
this.src = outSrc;
}
}

请问我的代码和书上代码有什么区别吗？哪种更好？为什么？

[天际的海浪]

你那样的问题是切换的图片是在第一次事件触发时才加载的， 当网速非常慢的情况下，第一次事件触发时图片就会消失一下，等待新图片加载再显示。 用Image()对象是为了预载图片，让替换的图片在页面初始时就加载好。第一次事件触发时就可以直接显示新图片了。

[天际的海浪]

可以，只要把 Image对象一直在内存中保存着就行

[imwinner]

引用 1 楼 天际的海浪 的回复:

你那样的问题是切换的图片是在第一次事件触发时才加载的，
当网速非常慢的情况下，第一次事件触发时图片就会消失一下，等待新图片加载再显示。

用Image()对象是为了预载图片，让替换的图片在页面初始时就加载好。第一次事件触发时就可以直接显示新图片了。

那我自己新建三个Image()对象，然后调用scr属性存放图像地址可以吗？ （我测试后发现没问题，但这样做和书上代码相比有什么缺点？）
代码如下：
function setupRollover(thisImage){
var overimg = new Image(); //自己新建Image对象
overimg.src = "img/" + thisImage.id +"_on.gif"; //用此对象src存放地址
console.log(overimg);
thisImage.onmouseover = function(){this.src = overimg.src;}
var clickimg = new Image();
clickimg.src = "img/" + thisImage.id +"_click.gif";
thisImage.onclick = function(){this.src = clickimg.src;}
var outimg = new Image();
outimg.src = "img/" + thisImage.id +"_off.gif";
thisImage.onmouseout = function(){this.src = outimg.src;}
}

[天际的海浪]

引用 4 楼 imwinner 的回复:

[quote=引用 3 楼 天际的海浪 的回复:] 可以，只要把 Image对象一直在内存中保存着就行

但这种方案是不是也有副作用？比如需要预载很大很多图像的时候，正好遇到用户网络带宽不够，就需要花很长时间预载，用户在页面加载完后，图像对象还在加载中，这时候操作同样看不到效果。[/quote] 如果图片真的需要花很长时间加载，那任何方法都没办法解决。 但如果图片加载时间只需要1到2秒， 不用Image对象预载。图片切换时就要消失1到2秒。 用Image对象预载的话。只要用户在页面加载完毕2秒后再切换图片就不会消失了。

[imwinner]

引用 3 楼 天际的海浪 的回复:

可以，只要把 Image对象一直在内存中保存着就行

但这种方案是不是也有副作用？比如需要预载很大很多图像的时候，正好遇到用户网络带宽不够，就需要花很长时间预载，用户在页面加载完后，图像对象还在加载中，这时候操作同样看不到效果。