如何预加载大尺寸图像？

我有一些链接，鼠标hover在那些链接上我正在改变

背景图像

我用过的jQuery是 –

 function imgchange() { $('.smenu li').mouseover( function(){ var src = $(this).find('a').attr('href'); $('.hbg').css('background-image', 'url(' + src + ')'); $(this).find('hbg').attr('title', 'my tootip info'); }); } 

它工作正常，但问题是当我在服务器上运行它时需要3-4秒才能更改，但是我第二次将鼠标移到图像上时会立即更改，我认为这是因为浏览器存储了图像缓存。 所以我在页面onLoad（）ivent上添加了一个javascript来预加载图片 –

  function preloader() { heavyImage = new Image(); heavyImage.src = "images/soluinfo1.jpg"; heavyImage.src = "images/soluinfo2.jpg"; heavyImage.src = "images/soluinfo3.jpg"; heavyImage.src = "images/soluinfo4.jpg"; heavyImage.src = "images/soluinfo5.jpg"; heavyImage.src = "images/soluinfo6.jpg"; heavyImage.src = "images/soluinfo7.jpg"; }  

但是这个脚本还没有解决我的问题。我该怎么办？

Answer 1

@ Richard的答案（sprites）可能是你所追求的最好的答案，但你的代码不起作用的原因是在大多数浏览器中，只有最后的heavyImage.src=""有足够的时间来实际注册浏览器作为一个实际的要求。 您只创建一个Image对象设置并重置.src属性的速度比浏览器可以请求文件的速度快（我认为现代JavaScript引擎会采取额外的步骤来删除所有中间.src语句，因为这样）。

有几种方法可以解决这个问题。 最简单的方法是创建多个Image对象，每个图像对应一个。 最简单的方法是通过以下方式：

通过将heavyImage变量放在其自己的函数中（请记住使用var关键字），您将确保Image对象存在于其自己的专用范围内。

另一种方法是将“load”事件侦听器附加到单个heavyImage 。 每次图像完成加载时，请获取下一张图像。 这种方法的缺点是你的图像将一次加载一个（导航图像不好，但对于图像库来说很好），而第一种技术将并行获取图像（通常一次只能获取四个） 。

Answer 2

您可能会发现更改方法并使用CSS sprite （ 以及其他文章 ）更容易。 然后你只需要引用一个图像，然后使用CSS设置该图像的哪个部分显示在哪个场景中。

这假设您正在使用的图像在您的控制之下，您可以使用图像编辑器将它们组合成一个大图像。