简体繁体 English

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

[英]How to get images to load faster in HTML5 mobile app?

原文 2013-08-23 20:13:48 7 2 javascript/ css/ html5/ jquery-mobile/ mobile

In my HTML5 mobile app, I am retrieving 10 images at a time from imgur (the user clicks a button to get more images). 在我的HTML5移动应用程序中，我一次从imgur中检索了10张图像（用户单击按钮以获取更多图像）。 When the images are retrieved, I apply some formatting via CSS (mostly to the height and width so that it properly fits the dimensions of an iPhone). 检索图像时，我通过CSS应用了一些格式（主要是高度和宽度，以使其适合iPhone的尺寸）。

My guess is that one of the reasons why it's taking so long is because I'm applying formatting to the images once they're retrieved and then showing these images. 我的猜测是，它花了这么长时间的原因之一是，一旦检索到图像，我便对它们应用格式化，然后显示这些图像。 Would I be better off saving the images in the state they should be displayed with the right dimensions so I don't have to apply any CSS to them? 我会更好地将图像保存为应该以正确尺寸显示的状态，这样我就不必对它们应用任何CSS了吗？ Would this help in getting the images to load faster? 这样有助于更快地加载图像吗？

Thanks! 谢谢！

2 个解决方案

According to this post , you should probably be grabbing only six at a time. 根据这篇文章，您可能一次只能抓六个。

Also, open your browser's debugger, go to the NETOWRK tab and watch how long things are actually taking. 另外，打开浏览器的调试器，转到NETOWRK选项卡，观察实际花费了多长时间。

Are the images that you are loading actually bigger than the display size? 您正在加载的图像实际上是否大于显示尺寸？ If so, it will load slower not because of the CSS application, but because you are loading unnecessarily big images. 如果是这样，它的加载速度变慢不是因为CSS应用程序，而是因为加载了不必要的大图像。 You should always re-size the images that you use to the displaying size. 您应该始终将使用的图像调整为显示尺寸。 You can also change the format and/or compression of the images to make it smaller, thus loading faster. 您还可以更改图像的格式和/或压缩以使其更小，从而加快加载速度。