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

Question

Here's some sample code that I want to control using jQuery (white button bg on black page bg):

    <ul class="buttons">
        <li class="button-displays"><a href="/products/">Products and Services for the company</a></li>
        <li class="button-packaging"><a href="/packaging/">Successful packaging services for the company</a></li>
        <li class="button-tools"><a href="/tools/">Data, mail and print tools for your company</li>
    </ul>

In the CSS file, I have the 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 to look like clickable buttons with the background sprite helping to fill out the background of the buttons.

My client doesn't like that in Firefox and Safari, when the page loads for the first time, the text inside the anchor loads first then the background sprite of the li (which is around 150kb b/c I have a total of 6 buttons) loads only when the sprite is fully downloaded. The background suddenly appears after a couple of seconds of downloading leaving the text in the anchor by itself until the background pops in.

I have tried playing with the following code in hopes that it would delay the loading of this markup and CSS:

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

and

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

I do not understand jQuery enough to know if this forces the code to wait until all elements load before appearing. I'd rather force the list item elements in the buttons code to delay appearing on the page until the bg img sprite is completely loaded.

Thanks for your help and suggestions!

Answer 1

I don't think you can attach a load event specifically for background images.

Try this instead:

Make the .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 your jQuery, create an image with the URL of your sprite, and attach a load handler to it that will show the buttons.

$(function() {
      // create a dummy image
    var img = new Image();

      // give it a single load handler
    $(img).one('load',function() {
        $('.buttons li').fadeIn(); // fade in the elements when the image loads
    });

      // give it the src of your background image
    img.src = "images/sprite.png";

      // make sure if fires in case it was cached
    if( img.complete )
        $(img).load();
});

Answer 2

I think you're on the right track. JQuery's load function executes after the element selected has completely finished loading - meaning all content is downloaded. The thing is with your code, the button markup will download before the content is downloaded. So, you can use jQuery to reveal the buttons completely with a load event. So, set you're buttons to be hidden in your CSS (visibility:hidden). Then, use you're $(document).load(function(){}) to reveal the buttons:

$(window).load(function(){
    $('.button').css({visibility: 'visible'});
})