Sencha touch 2 Sencha Touch 2使用背景图像实例化组件

我现在正在使用

senchatouch 2

组件

我面临以下问题：

我使用样式表为我的组件设置背景图像。我的整个场景由几个具有背景图像的组件/容器组成。当我实例化我的场景时-图像加载过程是异步的-即显示我的场景，然后加载并显示场景中的后续图像

我想知道如何等待，直到我的所有图像加载，然后显示我的场景。事实上，我可以使用

Ext.Img

类及其

load

事件，但这是我不想做的。我需要使用样式表为我的图像（作为背景）设置样式

---

非常感谢。

如果图像很小，请尝试将它们作为base64编码字符串嵌入。像这样使用它们

background: transparent url(data:image/png;base64,LONG-STRING-OF-BASE64-TEXT)

---

在css中。

要在不同组件/容器上添加背景图像，请如下定义您的css：-

 .x-panel{
   background:url(image.jpg)no-repeat center;
  }

 .x-scroll-container{
  background:url(image.jpg)no-repeat center;
  }
  .x-tab.panel{
   background:url(image.jpg)no-repeat center;
  }

在标题部分的index.html中包含此CSS：-

  <link rel="stylesheet" type="text/css" href="style.css"/>

---

希望这有帮助。

好的，谢谢。但我认为你还没有完全理解我的问题。我不想将背景图像设置为默认组件。我希望为自定义组件设置背景图像，并在加载/显示图像时能够处理事件。我知道如何使用CSS，以及如何将其包含到我的项目中（使用app.json而不是直接链接到索引）。谢谢-这应该行得通！不幸的是，我正在处理相当大的图像，如我的场景背景等，但非常感谢！我将使用这种方法处理小图像。使用上述方法将增加应用程序的大小。但我认为大多数用户更喜欢速度而不是尺寸。这个链接可能也有帮助