优化大量图像(1000+)的显示,以提高Web应用程序的性能和易用性

Question

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

在此输入图像描述

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

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

另一种选择可能是Google的Fastflip.

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

Answer 1

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

如果"评论图像"需要对每个图像进行评级,我宁愿采用Fastflip方法,其中焦点在于单个图像.缩略图库会分散所需的操作,并可能导致较少量的图片评级/评论.

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

只是我的2c.

在那种情况下,我仍然会选择Fastflip的想法,也许只是说明他们已经完成了多少图像,剩下多少图像,例如在顶部......或者通过6/25这样的数字或者通过水平滑动杆.那么也许你可以将缩略图填充到那个滑动条中,然后无限制地进行滚动...但不是可点击的,只是作为一个指标.我只是认为让他们选择在图像之间进行交叉导航可能会分散注意力,甚至可能会让人感到困惑. (2认同)
...此外,如果您允许它们导航(无论是在Fastflip还是在Gallery布局中),您必须通过在图像上覆盖大X来指示他们已经处理过图像,或者将其从DOM中删除.在我看来,显示缩略图而不这样做肯定不会很好. (2认同)