html - 如何确保所有图像正确加载

Question

在我的 HTML 页面中，我从同一个域加载了大约 40 张图像（在页面启动时，所有图像同时加载）。问题是，有时有些图像不显示，它们只是一个左上角带有红色 X 的白框。但是，如果我尝试刷新页面一次（或几次），则该图像会正常加载。

有谁知道为什么会发生这种情况以及如何确保所有图像加载正常？

Answer 1

发生这种情况是因为图像没有及时完成加载。您可以尝试使用 javascript 预加载它们

我要做的是确保图像很小（使用缩略图），以便它们可以加载。然后，一次只加载几个，并在页面滚动或用户请求更多图像时加载更多。

有关其工作原理的示例，请参见 google images 或 pinterest。当您滚动页面时，会加载更多图像，而不是一次加载所有图像。