Javascript + HTML:如何有效地显示大量图像



一些上下文:我正在制作一个 chrome 扩展程序,它将使用大量(可能数千个)图像网址。该列表将包含许多图像类型的 URL。

我想让用户能够通过查看实际图像来浏览这些图像,而不仅仅是看到 URL。现在我只是遍历列表,对于每个 url,我将一个元素附加到可滚动的元素。这将生成一个可滚动的图像列表。有些是 gif,有些是 png,有些是 jpeg 等。我担心如果列表变得非常大,会有很多滞后,并且该过程会占用大量带宽。

有没有一种好方法可以有效地做这样的事情(即减少滞后和加载时间)?

理想情况下,我会为每个网址提供一个缩略图。

显然,成千上万的图像不会同时显示在一个视图中,而是如您所描述的那样,显示在一长串列表中。我将采取的方法是缓冲图像并在滚动时显示它们。这将要求您计算一行中可以存储多少图像,并在当前滚动位置的前后至少缓冲两行或三行。这种方法的唯一缺点是,由于缩略图行很大,获得平滑的滚动解决方案可能会很棘手。

最新更新