优化大量图像（1000+）的显示，以提高Web应用程序的性能和易用性

Question

在我们的网络应用程序中，用户需要查看大量图像。这是我目前的布局。一次显示20张图像，缩略图上方有一个分页栏。单击缩略图将在左侧显示放大的图像。放大的图像将跟随滚动条，因此它始终可见。实际上非常简单。

我想知道在这种情况下最好的界面是什么：

一个选项是实现一个无限滚动脚本，当用户滚动时，它会延迟加载缩略图。不可见的缩略图将从DOM中删除。但我对这种方法的关注是DOM中的变化数量减慢了页面的速度。

另一种选择可能是Google's Fastflip。

您认为此应用程序的最佳方法是什么？激进的想法受到欢迎。

Answer 1

我认为你要问的问题是：用户应该采取什么行动？该网站的目的是什么？

如果“评论图片”需要对每张图片进行评分，我宁愿采用Fastflip方法，重点是单张图片。缩略图库会分散所需的操作，并可能导致评估/审核的图片数量较少。

如果焦点应该放在给定图像与其他图像的比较上，我会说尝试画廊方法，虽然我不会用缩略图强制无限滚动因为用户可以很快迷失在丰富的选择中。我认为如果你选择走这条路线，标准的分页（无论是静态的还是ajaxified）会更​​好。

只是我的2c。

Answer 2

• 如果您对缩略图进行分页，则可以预先生成包含每个页面的所有缩略图的单个图像，然后使用图像映射来处理鼠标悬停文本并单击。这将减少HTTP请求的数量，并可能导致更少的字节发送。应尽量减小图像之间的间隔距离，以使其最有效。这会有一些缺点。

• 要以预处理为代价减少图像下载大小，您可以尝试使用ImageGuide中的算法以最有效的内容格式（PNG或JPG）保存每个图像。同样，如果图像的压缩效果不佳（如手机相机的JPEG图像），则可以以某种质量为代价对其进行重新压缩。

• 一旦网站上有一些测试人员，您就可以分析图像往往被点击的模式（如果存在图案）并预加载全尺寸图像，或者甚至在拇指是预先加载所有图像时加载。

• 您可以使用JPEG2000图像（您确实说过“欢迎激进的想法”），这很容易，因为缩略图和主图像不需要像单独的文件一样发送。这是压缩格式的一个优点 - 它与告诉浏览器调整全尺寸图像以表示其自己的缩略图的黑客不同。

• 您可以查看Google的WebP图片格式。

• 在服务器端，可以使用NginX或Tux网络服务器优化静态内容交付的单独图像服务器。

Answer 3

我会显示缩略图，因为用户可能想要跳过一些图片。

，我也会远离分页

<<first <previuos n of x next> last>>

并寻求更容易实施和高效的方法。一个

load x more pictures.

没有任何无限卷轴，为什么不，甚至根本没有卷轴。只需load x more, previous x。

Answer 4

虽然这个答案可能有点不自然和无聊，但如果它们进入视图，我会完全按照你的异步加载缩略图（当然还有主要图片）的建议。 Google+在窗格中使用类似的技术将人员添加到圈子中。这样，您可以将服务器资源和带宽保留在客户端所需的图片上。正如Google+所示，DOM树上的操作足够快，并且不会减慢过去几年的计算机速度。

您也可以使用虚拟图像（例如“加载圆圈”动画gif）预先构建前面几行缩略图表并替换图像。这样，视图中的表已经构建，不需要重新渲染，因为如果在滚动期间没有图像在那里，则表格后面的流元素必须是。

您可以考虑让用户按标签，主题，类别，尺寸或任何其他方式过滤图片，以便更快地找到他们的搜索结果，而不是对缩略图进行分页（如布局方案所示）。