Sencha Touch 2使用背景圖像實例化組件

我正在使用Sencha Touch 2組件。Sencha Touch 2使用背景圖像實例化組件

我現在面臨的以下問題：

我使用樣式表設置背景圖片到我的部件。我的整個場景由多個具有背景圖像的組件/容器組成。當我實例化我的場景時 - 圖像加載過程是異步的 - 即顯示我的場景，然後加載並顯示場景中後來的圖像。

我想知道如何等待，直到我所有的圖像加載，然後顯示我的場景。事實上，我可以使用Ext.Img類和它的load事件，但這是我不想做的事情。我需要使用樣式表設置我的圖像樣式（作爲背景）。

非常感謝。

2012-09-19 MalcomCZ

如果圖像很小，請嘗試將它們嵌入爲base64編碼的字符串。並使用它們就像

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

在CSS中。

來源

2012-09-19 19:24:35 blessenm

謝謝 - 這應該工作！不幸的是，我正在爲我的場景等相當大的圖像，如背景等，但非常感謝！我將使用這種方法來處理小圖片。 – MalcomCZ

那麼使用上述方法將增加應用程序的大小。但我認爲大多數用戶會更喜歡速度超過規模。此鏈接可能也有幫助http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317 – blessenm

有關不同組件添加背景圖片/容器定義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"/>

希望這會有所幫助。

來源

2012-09-20 06:08:01

好的，謝謝。但我不認爲你完全明白我的問題。我不想將背景圖像設置爲默認組件。我想將背景圖像設置爲我的自定義組件，並且能夠在圖像加載/顯示時處理事件。我知道如何使用CSS以及如何將其包含到我的項目中（使用app.json而不是直接鏈接到索引）。 – MalcomCZ

Sencha Touch 2使用背景圖像實例化組件

回答

相關問題