天天看點

如何在html中加入精靈圖,如何加載html文本,直到加載背景圖像精靈?

這是我想用jQuery控制的一些示例代碼(黑頁bg上的白色按鈕bg):

  • Products and Services for the company
  • Successful packaging services for the company
  • Data, mail and print tools for your company

在CSS檔案中,我有以下内容:

.buttons li { background-image: url(images/sprite.png); height:126px; width:293px; float:left; margin:0 0 0 9px; }

.button-displays { background-position: 0 125px; }

.button-packaging { background-position: 0 250px; }

.button-tools { background-position: 0 375px; }

我将這些清單項設定為看起來像可點選按鈕,背景精靈有助于填寫按鈕的背景.

我的用戶端在Firefox和Safari中不喜歡它,當頁面第一次加載時,錨點内的文本首先加載li的背景精靈(大約150kb b/c我總共有6個按鈕) )僅在完全下載下傳精靈時加載.在下載下傳幾秒後,背景突然出現,将文本留在錨點中,直到背景彈出.

我嘗試使用以下代碼,希望它會延遲加載此标記和CSS:

$('.buttons li a').load(function() {

});

$(window).load(function() {

$(.buttons);

});

我不明白jQuery是否足以知道這是否會迫使代碼等到所有元素加載後再出現.我甯願強制按鈕代碼中的清單項元素延遲出現在頁面上,直到bg img sprite被完全加載.

感謝您的幫助和建議!