Javascript图像转换器的问题

imwinner 2020-03-29 02:21:09
最近在学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;
}
}

请问我的代码和书上代码有什么区别吗?哪种更好?为什么?
...全文
173 点赞 收藏 5
写回复
5 条回复
imwinner 2020年04月04日
引用 3 楼 天际的海浪 的回复:
可以,只要把 Image对象一直在内存中保存着就行
但这种方案是不是也有副作用?比如需要预载很大很多图像的时候,正好遇到用户网络带宽不够,就需要花很长时间预载,用户在页面加载完后,图像对象还在加载中,这时候操作同样看不到效果。
回复 点赞
天际的海浪 2020年04月04日
引用 4 楼 imwinner 的回复:
[quote=引用 3 楼 天际的海浪 的回复:] 可以,只要把 Image对象一直在内存中保存着就行
但这种方案是不是也有副作用?比如需要预载很大很多图像的时候,正好遇到用户网络带宽不够,就需要花很长时间预载,用户在页面加载完后,图像对象还在加载中,这时候操作同样看不到效果。[/quote] 如果图片真的需要花很长时间加载,那任何方法都没办法解决。 但如果图片加载时间只需要1到2秒, 不用Image对象预载。图片切换时就要消失1到2秒。 用Image对象预载的话。只要用户在页面加载完毕2秒后再切换图片就不会消失了。
回复 点赞
imwinner 2020年03月31日
引用 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;}
}
回复 点赞
天际的海浪 2020年03月31日
可以,只要把 Image对象一直在内存中保存着就行
回复 点赞
天际的海浪 2020年03月29日
你那样的问题是切换的图片是在第一次事件触发时才加载的, 当网速非常慢的情况下,第一次事件触发时图片就会消失一下,等待新图片加载再显示。 用Image()对象是为了预载图片,让替换的图片在页面初始时就加载好。第一次事件触发时就可以直接显示新图片了。
回复 点赞
发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告