如何在HTML5移動應用中更快地加載圖片？

Question

在我的HTML5移動應用程序中，我一次從imgur中檢索了10張圖像（用戶單擊按鈕以獲取更多圖像）。 檢索圖像時，我通過CSS應用了一些格式（主要是高度和寬度，以使其適合iPhone的尺寸）。

我的猜測是，它花了這么長時間的原因之一是，一旦檢索到圖像，我便對它們應用格式化，然后顯示這些圖像。 我會更好地將圖像保存為應該以正確尺寸顯示的狀態，這樣我就不必對它們應用任何CSS了嗎？ 這樣有助於更快地加載圖像嗎？

謝謝！

Answer 1

根據這篇文章 ，您可能一次只能抓六個。

另外，打開瀏覽器的調試器，轉到NETOWRK選項卡，觀察實際花費了多長時間。

Answer 2

您正在加載的圖像實際上是否大於顯示尺寸？ 如果是這樣，它的加載速度變慢不是因為CSS應用程序，而是因為加載了不必要的大圖像。 您應該始終將使用的圖像調整為顯示尺寸。 您還可以更改圖像的格式和/或壓縮以使其更小，從而加快加載速度。