按钮正在加载/显示图像，同时按下按钮sencha touch2

Question

我有一个按钮，我想显示给用户在页面加载正常按钮图标，一旦他按下按钮，我需要显示他按下按钮图标。我已经通过设置按钮来达到这个效果。我正在使用sass样式，从服务器访问图像url路径。它按照我的要求正常工作。 但第一次加载页面时显示正常按钮图标很好，一旦我按下按钮需要一些时间意味着（5-10秒）接下来它显示按下按钮图标，这只是第一次发生。为什么它第一次加载这么多时间来加载更改图标？下一次它会正常工作，在按下按钮期间立即更改图标。可以有任何其他最好的方式来实现这一个？

这里是我的代码：

{ 
         xtype: "button",       
         cls: 'aboutclsT', 
         handler: function() { 

         } 

        } 

在我app.scss

.aboutclsT{ 
background: url('http://src.sencha.io/100/http://s11.postimage.org/dg1zv08j7/about.png') !important; 
background-repeat: no-repeat; 
height: 133px; 
width: 100px; 

} 

.aboutclsT.x-button-pressing{ 
background: url('http://src.sencha.io/100/http://s7.postimage.org/4vy4hg72z/about_active.png') !important; 
background-repeat: no-repeat; 
height: 133px; 
width: 100px; 
} 

Answer 1

从URL，第一个电话下载它加载按钮图像。之后，浏览器将其缓存，因此需要时间。 如果你在CSS中使用base64，它将始终是快速的。