Как уменьшить время загрузки изображения

Question

Я разрабатываю веб-приложение для смартфонов с использованием гобелена. У меня есть петля на моей индексной странице. Я помещаю более пяти изображений в этот цикл. Каждый размер изображения составляет 5 КБ. Но для его загрузки требуется более 150 мс (каждое изображение).

Есть ли способ уменьшить время загрузки изображения. Пожалуйста, помогите мне.

код:

Index.tml

<t:loop source="topRatedVideoDatas" value="videoItemProperty" index="currIndex" encoder="encoder"> 
<table width="100%" cellpadding="0" cellspacing="0"> 
<tr class="list"> 
<td> 
<img src="${videoItemProperty.image}" width="130" /> 
</td> 
</tr> 
</table> 
</t:loop> 

Index.java

public List<ItemProperty> getTopRatedVideoDatas() { 
     List<ItemProperty> videoItemProperties = null; 
     try { 
      final GetData getData = new HttpGetData(); 
      final String json = getData.getContent("http://localhost:8080/sample/getTopRatedItems"); 
      final JSONObject object = new JSONObject(json); 
      if(object.optString(Constants.CODE).equalsIgnoreCase(Constants.STATUS_CODE_1)) { 
       videoItemProperties = new ArrayList<ItemProperty>(); 
       final String[] result = object.optString(Constants.ITEMS).split(Constants.COMMA); 
       for(int innerIndex = 0; innerIndex < result.length; innerIndex++) { 
        videoItemProperties.add(itemProperties.get(innerIndex).getPropety().get(innerIndex)); 
       } 
      } 
     } catch(final Exception e) { 

     } 
     return videoItemProperties; 
    } 

Answer 1

Смотрите мой выше комментарий; Я хотел бы предложить

• движение логики, которая собирает видеоданные из вашей страницы кода и в службу
• придумать разумный способ кэширования результата данных видео и/или периодически обновлять его в background

Это приведет к ускорению отображения страницы; следующий шаг - посмотреть, сколько времени требуется для загрузки самих изображений.

Вы можете просмотреть масштабирование и сжатие изображений. Вы можете убедиться, что у изображений есть уникальный URL-адрес для их содержимого, а в будущем будущее заканчивается заголовком (и/или ETag), чтобы гарантировать, что браузер загружает их один раз и только один раз и сохраняет их в локальном кеше.

Вы можете сделать более продвинутые трюки, если этого недостаточно. Сначала вы можете загрузить миниатюру с быстрым низким разрешением, а затем заменить ее (на месте) миниатюрой с более высоким разрешением после начальной загрузки страницы (хотя вы получаете некоторое преимущество при использовании формата прогрессивного JPEG.

Но опять же, начните с измерениями и целями, и выяснить, где проблемы на самом деле. FF и Chrome имеют отличные инструменты для получения этой информации. Используйте это.