Question

网页要求在页面上以适合视口的行显示大量缩略图。图像设置为160px的高度。图像文件名来自数据库，因此循环用于创建<img>标记。

图像以随机顺序显示，由查询处理。目前大约有2100张图片，每天都有更多图片。

问题是如何最有效地优化图像的加载。我意识到在视口中加载所有图像需要一段时间，更不用说在视口外部（“在折叠下方”）。

假设缩略图图像针对文件大小进行了优化。此外，每行的图像数量需要调整为视口宽度。

在页面上显示如此大量图像的最佳方法是什么？如果访问者滚动页面，要“准备”出现的图像？

其他假设/要求（已添加）

要求是视口中显示的项目数取决于“适合”的数量。因此，如何确定有多少项目（每个项目的宽度分别为150p x 300p）将适合当前视口 - 使视口区域中项目的显示更加“高效”。

这需要客户端的某些JS进行一些计算。因此，一些客户端代码必须更改视口中图像的img标记以使其可见，同时使用延迟加载（？）加载/延迟在视口外加载图像？

**已添加**

图像侧面约25-30K，均为jpg。 img标签指定高度为150px;图像高度为100-150px。

显示图像的代码循环显示可用图像列表，将它们全部放在一个div中，因此它们显示为左右/上下。图像并不总是以该序列加载，有时“行”中的一些图像不会在它旁边的图像之后加载。

所以，我正在寻找一种在视口中显示图像的有效方法（第一个），然后在滚动视口时显示其余部分。显示和技术需要对不同大小的视口做出响应。

Answer 1

您应该为图片使用延迟加载。并减少图像的文件大小。

您可能希望延迟加载所有图像，当您的图像将出现在视口内部延迟加载它们时。

对于图像尺寸缩小，有几种技术，一些简单的技术是：

使用jpg而不是png或gif
确保您的图片是静态的，而不是通过php或类似的方式预先制作
将图像质量降低到20％或30％，但将图像增加到200％。这意味着如果您的图像高度为160像素，请将原始图像保存为320像素高，但将jpg文件的质量降低到20％左右。这会大大减少你的文件大小！高度为320像素的原始图像看起来并不好看，但是当你将它添加到160像素高的容器时，它是一个更好的图像。

这样的事情：

<img src="my-320px-20pquality-image.jpg" style="height:160px" />

高级：

Answer 2

你绝对应该通过一些ajax请求添加一些分页或加载图像来优化页面加载。

您的操作示例首先通过将查询限制为20来显示其中的20个。每当用户单击“加载更多”时，它会再加载20个缩略图，直到结束。如果您一次加载大量图像，页面可能需要一些时间来加载。

编辑：您甚至可以将事件绑定到滚动，每当用户结束缩略图时，您还需要20个。