如何在HTML5移动应用中更快地加载图像？

Question

在我的HTML5移动应用程序中，我一次从imgur检索10个图像（用户单击按钮以获取更多图像）。检索图像时，我通过CSS应用一些格式（主要是高度和宽度，以便它适合iPhone的尺寸）。

我的猜测是，它花了这么长时间的原因之一是因为我在检索图像后对图像应用格式，然后显示这些图像。我是否最好将图像保存在应该以正确尺寸显示的状态下，这样我就不必对它们应用任何CSS了？这有助于更快地加载图像吗？

谢谢！

Answer 1

根据this post，你应该一次只抓六个。

此外，打开浏览器的调试器，转到NETOWRK选项卡，观察实际执行的时间。

Answer 2

您加载的图片实际上是否大于显示尺寸？如果是这样，它将加载速度慢，不是因为CSS应用程序，而是因为您正在加载不必要的大图像。您应该始终将您使用的图像重新调整为显示大小。您还可以更改图像的格式和/或压缩，使其更小，从而加载更快。