Question

我的老板在网站上看过这个：http://event.photoswarm.com/

注意图片在相册中的变化情况。这样做的缺点是所有的缩略图都必须在开始时下载，然后我猜这一切都有效。

有没有办法在加载图像的同时获得类似工作的东西？

我猜的问题是：

使图像加载更清洁
让它们加载更好，因为有些相册可能有200多张照片
使用jquery插件 - 这个似乎是由照片群制作的，我想如果我偷了它们就不会太夸大了！

因此，如果有办法制作某种东西，或者任何人都知道我可以下载的免费插件，那就太棒了。

Answer 1

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

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

它使用jQuery和Prototype.js

Answer 2

您可以将所有图像位置存储在一个数组中。然后它只会在您将图像悬停在图像上时加载图像。

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

Answer 3

我想你首先通过Yahoo Tool SmushIt拍摄你的照片然后将它们抹去，这会从你的图像中删除所有不必要的信息。然后我会使用您想要在该特定专辑上的图像的链接初始化一个数组，然后只需添加一个

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

在指定的专辑（例如，可能是div）上，然后通过该数组运行，只需使用您的链接从该数组中更改该div的“背景图像”。也许你应该为该动作添加一个setTimeout（），这样就不会那么快。另一种选择是，如果您选择.hover()，但我不确定这是否符合您的要求。

Answer 4

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

首先，我们可以接受你的代码（虽然这个问题已经有一年了，所以你可能已经有了），我们目前处于重写的中间，这段代码作为一部分折旧了这一点。

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]

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

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

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

4 个答案: