如何在app.thefacesoffacebook.com等网页中显示数百万张图片

Question

我受app.thefacesoffacebook.com的启发，并希望与我的组织的Yammer（一种社交网络）配置文件构建类似的东西。

我已经删除了我需要的数据，例如存储在数据库中的个人资料ID，图片网址等。但是如何在网页上显示图像，如app.thefacesoffacebook.com？它通常从数据库获取URL并显示带有IMG标记的图像或他们正在使用的任何其他技巧。当你点击一个它应该放大的图像时，我期待看到类似的行为。我不太确定要解决这个问题，任何想法都会有所帮助。我希望信息足以引导我，让我知道这是否有意义。

由于

Answer 1

这个问题答案真的很大，但从鸟瞰的角度来看，实现这一目标最常见的方式就是采用分页。

分页是一种“延迟加载”方案，其中以预定义的数量加载图像组。例如，您可能会在屏幕上看到一组20个图像，但是当您滚动到这20个图像的底部时，会触发一个事件，然后加载下20个图像并将其附加到窗口。

如果你可以想象在过去的日子里，在动态html之前，你会为每个“大块”图像分别设置“页面”。要查看接下来的20张图片，请点击“下一步”。现代实现在实践中没有太大的不同，只是他们使用JavaScript自动异步加载每个块，并将其附加到当前页面。

一个小的，抽象的例子可能如下：

window.addEventListener("scroll", function() {
    var i = 0;
    if ( scrolledToBottom() ) {
        i++;
        loadNextImageGroup(i);
    }
})

有关分页和分页技巧的更多信息，请查看您最喜欢的搜索引擎以获取“分页教程”。