jQuery的背景影像变更

我的老板看到这个网站上：http://event.photoswarm.com/jQuery的背景影像变更

注意图像是如何改变你整个专辑去。这样做的缺点是所有的缩略图都必须在开始时下载，然后我想这一切都可以运行。

有没有一种方法可以在加载图像的时候获得类似于工作的效果？

我想的问题是：

使图像加载少许清洁剂
让他们更好地加载的一些专辑中能有200多张照片
使用jQuery插件 - 这一个似乎是由照片集群拍摄的，我想如果我偷了它，它们就不会太滑稽！

因此，如果有办法让任何东西或任何人知道一个免费的插件，我可以下载，这将是伟大的。

来源

2011-12-14 Richard Housham

如果检查元素和资源，你会发现这一点：

http://static.photoswarm.com/js/app_user.js

它使用jQuery和的Prototype.js

来源

2011-12-14 15:47:33

是的欢呼，但就像我说，一起加载所有的图像想知道是否有更好的方式来做到这一点，因为我的一些专辑将有200多个图像。另外我猜他们不会喜欢我在那里刻痕js – 2011-12-14 15:50:27

你可以存储阵列中的所有图像的位置。然后，只有当你将鼠标悬停在图像上时，它才会加载图像。

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

来源

2011-12-14 15:48:10

我想你把你的图像，并通过雅虎工具SmushIt首先是斯马什它，这消除了您的图像的所有unneceseary信息。然后我会初始化你想拥有对特定相册的图像的链接的数组，然后只需添加一个

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

在指定相册

（这可能是例如一个div）和你通过该数组运行，并简单地改变该数组的“背景图像”与你的链接。也许你应该添加一个setTimeout（）到那个动作，所以它不会那么快。如果您选择.hover()，但我不太确定这是否符合您的要求。

来源

2011-12-14 19:01:38

我想，如果我回答这个因为我有问题:)

首先代码的原作者，我们确定你服用的代码（虽然这个问题是它可能是最好的那么你可能已经拥有了），现在我们正在进行大规模的重写，并且此代码作为其中的一部分进行了折旧。

Fabián链接到的文件包含您需要的代码，但它也包含许多其他网站代码，您不需要。你想要的一点实际上很简单，但是有一些不同的事情正在发生。深入该文件中，您将看到PS.CoverLoader类。

首先，将所有页面的大拇指和开始加载在后台。我们假设他们已经被加载。

轻弹是非常简单的 - 我只是使用伪代码，因为你已经有js在那里（你可能会使用jQuery这几天）。

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]

关于加载大量图像的其他问题。这是一个问题。该系统加载页面的所有大拇指。效率不高 - 有些页面是10s/100s的MB。我们尝试为包含所有大拇指（图像精灵）的每张专辑创建一个单独的长图像，但这并不适用于许多不同的图像。

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

来源

2013-01-31 12:53:06

jQuery的背景影像变更

回答

相关问题