多张图片的页面加载时间

Question

我正在尝试找到将许多（例如100张）图像加载到网页上的最佳方法。一些图像是具有视差效果的大背景图像，其他图像是立方体上的图像（因此，立方体的所有侧面均由div制成）； 我想知道什么是最好的方法，到目前为止，我有一些想法：

方法A 1延迟加载所有出现的图像和背景图像。 2对较小的图像使用精灵表。 3压缩所有图像以获得最佳压缩效果，请使用Gzip。

方法B（实验性） 1创建一个单独的样式表，其中包含每个转换为base64的图像的变量（例如：root {-boxImage1：url（“ data：image / jpeg; base64，/ 9j / 4AAQSkZJRgABA .....） 2为CSS创建服务人员，因为它会变得很大 3使用压缩来最小化css文件。 4使用gzip从服务器传输。

方法c 将图像作为二进制文件存储在数据库中 （我担心这实际上会使它们变慢，因为它将搜索数据库而不是文件系统）。

这些方法中是否有值得做的，还是我应该使用一种更简单的方法？

Answer 1

我目前正在使用大量用户上传的图像进行PWA，我可以自信地说，使用您的方法A 确实使我们的应用加载时间感到惊奇。

压缩上传的图像并将其转换为base64字符串会极大地减小它们的大小，并与一次加载5张图像的延迟加载相结合，app会更快。

由于您的问题中带有服务人员标签，因此我建议至少预先缓存第一批图像，以更快地加载首页。