Sencha 图片库视图答案

【问题标题】：Sencha image gallery viewSencha 图片库视图
【发布时间】：2013-07-23 23:09:16
【问题描述】：

我正在创建一个网格（图库）视图来显示图像。应用程序从服务器获取图像并将其显示在网格中。我可以使用 XTemplate 创建这个视图，它给了我适当的结果。我的 Xtmeplate 代码是：

tpl:  Ext.create('Ext.XTemplate',
        '<div class="gallery" id="photos">',
        '<tpl for=".">',
        '<img src="{media:this.getURL}{picname}" width="30" height="30"      class="thumbnail" data-fullimage="{media:this.getURL()}{picname}" alt="{description}"/>',
        '</tpl>',
        '</div>',{
            getURL: function(){

               return Gallery.utils.globalVar.getRemoteDirPath();
            }
        })

问题是图像尺寸很大，我想以小缩略图显示它们。因此，当我在移动设备上运行该应用程序时，该应用程序变得非常缓慢并且挂起。原因可能是因为它同时下载所有图像并在视图上渲染。

任何人都可以提出可能的解决方案，我可以如何加快这个过程或任何不同的方式来做到这一点。

谢谢伊山耆那教

【问题讨论】：

在服务器上有单独的小尺寸和大小的缩略图，并在网格中获取这些缩略图。并在用户选择后在不同视图上显示实际图像。这将提高下载和渲染图像的性能。
其实我已经想到了。但客户的要求是他不想放任何重复的副本，并希望显示缩略图和同一张图片的完整视图。
我不确定客户如何知道您在应用中使用的是相同图像还是不同尺寸的相同图像？无论如何，如果您愿意，您可以使用 sencha IO 服务来调整图像大小 sencha.com/learn/how-to-use-src-sencha-io 。无论如何，在客户端加载大图像并调整其大小是个坏主意。

标签： javascript html sencha-touch image-gallery

【解决方案1】：

我同意@ThinkFloyd 的观点，客户不一定需要知道或对实施模式有发言权，特别是如果它不会对结果产生不利影响的话。 Thinkfloyd 提供了一种非常有效且易于实施的方法，另一方面，客户坚持让您采用这种替代方法，从而为您提供了超出必要的工作量。如果您有效地与他/她沟通，他/她可能愿意妥协。您只需要在 images 文件夹中有一个 thumbnails 文件夹即可链接到缩略图图像。希望您最终设法解决它！

【讨论】：