当鼠标穿过元素时，jquery背景图像会发生变化

我的老板在一个网站上看到了这一点：

请注意，当您浏览相册时，图像是如何变化的。这样做的缺点是，所有的缩略图都必须在开始时下载，然后我想一切都会正常工作

有没有一种方法可以让我在更好地加载图像的同时获得类似的工作

我想问题是：

使图像加载稍微干净一点

让它们更好地加载，因为一些相册可能有200多张照片

使用jquery插件-这一个似乎是由PhotoSwarm制作的，我想如果我偷了它，他们不会太高兴的

---

因此，如果有一种制作免费插件的方法或任何人知道免费插件，我都可以下载。如果您查看元素和资源，您会发现：

---

它使用jQuery和Prototype.js，您可以将所有图像位置存储在一个数组中。然后，它只会在您将鼠标悬停在图像上时加载图像

var images=new Array("image1.jpg","image2.jpg","image3.jpg", 'image4.jpg");

---

我想你先通过Yahoo的工具SmushIt把你的图片弄脏，这会从你的图片中删除所有不必要的信息。 然后我会初始化一个数组，其中包含您希望在该特定相册上拥有的图像链接，然后只需添加一个

`.mousemove(function(){
     set Timeout(function(){
       //code goes here
     },1000)
  })`

在指定的相册上（例如，可以是一个div），然后运行该数组，只需使用该数组中的链接更改该div的“背景图像”。 也许您应该在该操作中添加一个setTimeout（），这样就不会运行那么快。

---

另一种选择是，如果您选择

.hover（）

，但我不确定这是否符合您的要求。

我认为最好回答这个问题，因为我是相关代码的原始作者：）

首先，我们接受代码是可行的（虽然这个问题已经有一年了，你可能已经有了），我们现在正处于一个大的改写过程中，这个代码被贬值了。 Fabián链接到的文件确实包含了您需要的代码，但它也包含了很多其他您不需要的代码。你想要的那一点其实很简单，但是有两种不同的情况在发生。在该文件的深处，您将看到PS.CoverLoader类

首先，这会占用页面的所有拇指，并开始在后台加载它们。让我们假设它们已经被加载了

flicking非常简单——我将使用伪代码，因为您已经有了js（现在您可能会使用jquery）

关于加载大量图像的其他问题。这是个问题。此系统加载页面的所有拇指。它的效率很低-有些页面的MB是10s/100s。我们尝试为每个相册创建一个包含所有拇指的长图像（一个图像精灵），但对于这么多不同的图像，这并不能真正起作用

---

我的建议是在第一次悬停时加载给定相册的所有图像，并将其存储在js的数组中。

是的，干杯，但正如我所说，将所有图像加载在一起是想知道是否有更好的方法来实现这一点，因为我的一些相册将有200多个图像。我想他们也不会喜欢我在那里偷东西，你可以从中学习，这就是它的工作原理。此外，如果将JS文件放入document.ready（）中，它将首先加载页面，然后加载缩略图。再看看这个：查看来源：它在加载页面后加载Tumbnail。下载它们仍然需要很长时间，如果你有200多个，那么它会导致problems@RichardHousham您链接的页面在循环浏览的每个相册中只有五到六张图像。不知道为什么你挂断了下载200+图像每相册。

create array of all images for album
attach to album mousemove
on move find x position of the mouse
translate that to a position in your array
    segment_size = album_width / img_count
    segment = Math.floor(offset/segment_size)
switch album displayed image to be array[segment]