按钮需要时间加载/显示图像，同时按下感应器touch2按钮

Question

我有一个按钮，我想显示给用户在页面加载普通按钮图标，一旦他按下按钮，我需要显示他按下按钮图标。我通过设置cls按钮实现了这一目标。我使用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，它将一直都是快速的。