如何使用javascript预先缓存图像以便快速查看？

我有一个网页,我希望用户在将鼠标放在图像的某个部分上时看到新图像.我用了一张图片地图.

在标题中我定义了这些函数:

它有效,但速度很慢.将鼠标放在第二张图像上时,需要几秒钟才能显示; 我的临时解决方案是大幅减小图像的大小,因为它们很大(现在它们快速切换为2.5mb,但仍然不是无缝的). 如何在不降低图像质量的情况下使图像切换更加无缝？ 在第二个想法,我意识到我也可以只显示两个图像,小规模和大规模,并在鼠标上,他们会切换位置; 我该怎么做？这会减少滞后吗？

您不需要创建任何页面元素,它们都可以使用JavaScript预加载:

tempImg = new Image()
tempImg.src="pic2.jpg"

编辑:

如果你有很多图像,你可以使用穷人的多预加载器:

preloads = "red.gif,green.gif,blue.gif".split(",")
var tempImg = []

for(var x=0;x

        
这种方法对我不起作用.我需要预加载,因为我正在重新加载页面之前向用户显示一条消息 - 我知道边缘情况.但是,如果我把它放在DOM中,这是有效的:``.强制高度和宽度无任何阻止视图损坏视图,而"visibility:hidden"使浏览器加载图像. 

2> Adam Lassek..：
使用sprite执行此操作是一个很好的解决方案,因为您无需等待加载新图像.精灵通过将两个图像合并为一个,并在鼠标悬停时更改背景偏移来工作.

您甚至可以使用CSS,以获得更快的结果.有这个一个很好的教程在这里.

        

3> Turadg..：
从Javascript 1.6开始,这可以在没有任何命名变量的情况下完成:

imageList.forEach( function(path) { new Image().src=path } );