如何显示数以百万计的图像在一个网页像app.thefacesoffacebook.com

How to display millions of images in one webpage like app.thefacesoffacebook.com

本文关键字：网页 一个 app com thefacesoffacebook 图像 何显示 显示 数以百万计      更新时间：2023-09-26

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

我已经刮了我需要像个人资料id，图像URL和其他存储在数据库中的数据。但是如何在app.thefacesoffacebook.com这样的网页中显示图像呢?它通常从DB获取url并显示带有IMG标签的图像或他们正在使用的任何其他技巧。我希望看到类似的行为，当你点击一个图像，它应该变焦。我不太确定要不要这么做，任何想法都会很有帮助。我希望这些信息对我有足够的指导，如果这是有意义的，请告诉我。

谢谢

这个问题的答案真的很庞大，但从鸟瞰的角度来看，实现这个问题的最常见方法是使用分页。

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

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

一个小的、抽象的例子可能如下:

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

有关分页和分页技术的更多信息，请查看您最喜欢的搜索引擎"分页教程"。

相关文章：