如何在*相同*时间加载我的网站的不同部分/框/图像？

Question

我有一个网站，分为3个关键部分，方框A，B和C.

方框A包含一个大图像。方框B包含6个较小图像的缩略图。方框C包含一个中等大小的图像。

如果用户点击方框A中的图像，则另一个图像被加载到方框A中，同时，方框B重新加载了6个新的随机缩略图，而方框C现在包含方框A中前一个图像的较小版本

目前，这些盒子中的图像以不同的时间/速度加载，使得UX看起来很笨拙（也就是说，Box C可能在B之前加载，而B在A之前加载）。如何确保所有图像在完全相同的时间加载（基本上，确保所有图像在加载最后一个图像的同时加载）？

Answer 1

您可以使用JavaScript preloading在加载文档时缓存每个图像。只要没有人太快点击您的图片，您就会获得所需的结果。

另一种选择是将所有图像合并为一个大图形，并使用CSS仅显示您想要的部分。但是，当涉及到几个小图像时，这才真正实用。