如何在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被完全加载.

感谢您的帮助和建议!