I have a site that is divided into 3 key sections, Box A, B and C.
我有一个网站，分为3个关键部分，框A，B和C.
Box A contains a large image. Box B contains 6 thumbnails of smaller images. Box C contains a medium-sized image.
方框A包含一个大图像。方框B包含6个较小图像的缩略图。框C包含中等大小的图像。
If the user clicks on the image in Box A, another image is loaded into Box A, while simultaneously, Box B is reloaded with 6 new random thumbnails, and Box C now contains a smaller version of the previous image in Box A.
如果用户点击框A中的图像，则另一个图像被加载到框A中，同时，框B被重新加载6个新的随机缩略图，而框C现在包含框A中的先前图像的较小版本。
Currently, images in these boxes load at different times/speeds, making the UX look awkward (that is, Box C might load before B, and B before A). How could I ensure that all the images load at exactly the same time (essentially, ensure that all images load at the same time that the last image is loaded)?
目前，这些盒子中的图像以不同的时间/速度加载，使得UX看起来很笨拙（也就是说，Box C可能在B之前加载，B在A之前加载）。如何确保所有图像在完全相同的时间加载（基本上，确保所有图像在加载最后一个图像的同时加载）？
1 个解决方案
#1
1
You can use JavaScript preloading to cache every image when the document is loaded. As long as nobody clicks on your images too quickly, you'll have the desired results.
您可以使用JavaScript预加载来在加载文档时缓存每个图像。只要没有人太快点击你的图像，你就会得到想要的结果。
Another option is to combine all the images into a single large graphic and use CSS to show only the part you want. However, this is really only practical when several small images are involved.
另一种选择是将所有图像组合成一个大图形，并使用CSS仅显示您想要的部分。然而，这仅在涉及几个小图像时才是实用的。
#1
1
You can use JavaScript preloading to cache every image when the document is loaded. As long as nobody clicks on your images too quickly, you'll have the desired results.
您可以使用JavaScript预加载来在加载文档时缓存每个图像。只要没有人太快点击你的图像，你就会得到想要的结果。
Another option is to combine all the images into a single large graphic and use CSS to show only the part you want. However, this is really only practical when several small images are involved.
另一种选择是将所有图像组合成一个大图形，并使用CSS仅显示您想要的部分。然而，这仅在涉及几个小图像时才是实用的。