0

我正在使用挂毯为智能手机开发 Web 应用程序。我的索引页中有一个循环。我在该循环中放置了五个以上的图像。每个图像大小为 5KB。但是加载(每个图像)需要超过 150 毫秒。

有什么方法可以减少图像加载时间。请任何人帮助我。

代码:

索引.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>

索引.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;
    }
4

1 回答 1

0

见我上面的评论;我会建议

  • 将组装视频数据的逻辑从页面代码中移到服务中
  • 想出一个合理的方法来缓存视频数据结果,和/或在后台定期更新它

这将导致页面渲染速度更快;下一步是查看下载图像本身需要多长时间。

您可以查看重新缩放和压缩图像。您可以确保图像具有其内容的唯一 URL,以及远期过期标头(和/或 ETag),以确保浏览器下载它们一次且仅一次,并将它们保存在本地缓存中。

如果这还不够,你可以做更高级的技巧。您最初可以下载一个快速的低分辨率缩略图,然后在初始页面加载后将其(就地)替换为更高分辨率的缩略图(尽管在使用渐进式 JPEG 格式时您会获得一些好处。

但同样,从测量和目标开始,找出问题所在。FF 和 Chrome 都有很好的工具来获取这些信息。用那个。

于 2013-04-05T16:13:01.223 回答