jquery - How do I delay html text from appearing until background image sprite is loaded? -

here's sample code want control using jquery (white button bg on black page bg):

    <ul class="buttons">         <li class="button-displays"><a href="/products/">products , services company</a></li>         <li class="button-packaging"><a href="/packaging/">successful packaging services company</a></li>         <li class="button-tools"><a href="/tools/">data, mail , print tools company</li>     </ul> 

in css file, have following:

    .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; } 

i have styled these list items clickable buttons background sprite helping fill out background of buttons.

my client doesn't in firefox , safari, when page loads first time, text inside anchor loads first background sprite of li (which around 150kb b/c have total of 6 buttons) loads when sprite downloaded. background appears after couple of seconds of downloading leaving text in anchor until background pops in.

i have tried playing following code in hopes delay loading of markup , css:

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

and

    $(window).load(function() {         $(.buttons);     }); 

i not understand jquery enough know if forces code wait until elements load before appearing. i'd rather force list item elements in buttons code delay appearing on page until bg img sprite loaded.

thanks , suggestions!

i don't think can attach load event background images.

try instead:

make .button li elements display:none:

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

then in jquery, create image url of sprite, , attach load handler show buttons.

$(function() {       // create dummy image     var img = new image();        // give single load handler     $(img).one('load',function() {         $('.buttons li').fadein(); // fade in elements when image loads     });        // give src of background image     img.src = "images/sprite.png";        // make sure if fires in case cached     if( img.complete )         $(img).load(); });