Javascript 如何在app.thefacebook.com这样的网页上显示数百万张图片

我受app.thefacebook.com的启发，希望为我的组织建立类似的Yammer（一种社交网络）档案

我已经抓取了我所需要的数据，如配置文件id、图像URL和其他存储在数据库中的数据。但是如何在app.thefacebook.com这样的网页上显示图像呢？它通常是从DB获取URL，并使用IMG标记显示图像，或者使用其他任何技巧。我期待看到类似的行为，当你点击一个图像，它应该缩放。我真的不确定该怎么做，任何想法都会有帮助。我希望信息足以指导我，让我知道这是否有意义

---

谢谢

这是一个答案非常丰富的问题，但从鸟瞰的角度来看，实现这一点最常见的方法是使用分页

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

如果您可以想象，在过去，在动态html出现之前，您会为每个图像“块”创建单独的“页面”。要查看接下来的20幅图像，请单击“下一步”。现代实现在实践中并没有太大不同，只是它们使用JavaScript自动异步加载每个块，并将其附加到当前页面

下面是一个小型抽象示例：

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

有关分页和分页技术的更多信息，请查看您喜爱的搜索引擎中的“分页教程”