如何减少图像加载时间

Question

我正在使用挂毯为智能手机开发Web应用程序。 我的索引页面有一个循环。 我在该循环中放置了五个以上的图像。 每个图像大小为5KB。 但是加载需要花费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

参见我上面的评论； 我会建议

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

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

您可以研究重新缩放和压缩图像。 您可以确保图像的内容具有唯一的URL，并且标头（和/或ETag）将在不久之后过期，以确保浏览器一次只能下载一次，并将它们保存在本地缓存中。

如果这还不够，您可以做更多的高级技巧。 您可以首先下载快速的低分辨率缩略图，然后在初始页面加载后将其替换为高分辨率的缩略图（尽管使用渐进式JPEG格式可以获得一些好处）。

但同样，从度量和目标开始，找出问题的根源。 FF和Chrome都是获取信息的出色工具。 用那个