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

Question

我现在正在使用Sencha Touch 2组件。

我面临以下问题：

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

我想知道如何等到我的所有图像都加载完毕后再显示我的场景。事实上，我可以使用Ext.Img类及其load事件，但这是我不想做的。我需要使用样式表来设置我的图像（作为背景）的样式。

非常感谢。

Answer 1

要在不同的组件/容器上添加背景图像，请像这样定义您的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;
  }

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

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

希望这可以帮助。

Answer 2

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

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

在 CSS 中。