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

Question

在我的HTML页面中，我从同一个域加载了大约40个图像（在页面启动时，所有图像同时加载）。问题是，有时一些图像没有出现，它们只是一个白色的盒子，左上方有一个红色的X.但是如果我尝试刷新页面一次（或几次），那么该图像就可以正常加载。

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

Answer 1

这是因为图像没有及时完成加载。您可以尝试pre-loading them with javascript

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

请参阅google图片或pinterest以获取有关其工作原理的示例。滚动页面时，会加载更多图像，而不是一次加载所有图像。