Javascript Sencha图像库视图

我正在创建网格（图库）视图以显示图像。应用程序从服务器获取图像并将其显示在网格中。我可以使用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();
            }
        })

tpl:Ext.create（'Ext.XTemplate'，
'',
'',
'',
'',
'',{
getURL:function（）{
return Gallery.utils.globalVar.getRemoteDirPath（）；
}
})

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

有没有人能提出一个可能的解决方案，比如我如何加快这个过程，或者有什么不同的方法

谢谢

---

Ishan jain

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

在服务器上有单独的小尺寸缩略图，并在网格中获取这些缩略图。用户选择后，在不同视图上显示实际图像。这将提高下载和渲染图像的性能。实际上我已经想到了这一点。但客户的要求是，他不想放任何副本，希望用相同的图像显示缩略图和全视图。我不知道客户怎么知道你的应用程序中使用的是相同的图像还是相同大小的图像？无论如何，如果你愿意，你可以使用sencha IO服务来调整图像大小。在任何情况下，在客户端加载大图像并调整其大小都是一个坏主意。