How can I postpone html text until a sprite background image appears?

Question

Here is an example of the code I want to control with jQuery (white bg button on bg black page):

<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 created these list items to look like buttons with buttons with a sprite background, helping fill 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, and then the li background sprite (which is about 150kb b / c. I have a total of 6 buttons) loads only when sprite is fully loaded. The background suddenly appears after several seconds of loading, leaving the text anchored itself until the background appears.

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

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

and

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

I do not understand jQuery to find out if this code will wait until all the elements have loaded before they appear. I would rather make the list item elements in the button code linger on the page until bg img sprite is fully loaded.

Thanks for your help and suggestions!

Answer 1

I don’t think you can attach a download event specifically for background images.

Try this instead:

Make the elements .button li 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 displays 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. The jQuery download function is executed after the selected item has completed loading completely - this means that all content has been loaded. The point is in your code, the button layout will be loaded before the content is loaded. This way you can use jQuery to fully expose the buttons with the load event. So, configure the buttons that should be hidden in your CSS (visibility: hidden). Then use the $ (document) .load (function () {}) buttons to open the buttons:

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

Answer 3

write the code inside

 $(document).ready(function(){ //your logic here }); 

this ensures that your DOM manipulation begins after the DOM is completely locked ...

plus you can also use

 $("#yourDOMelementID").ready(function(){ }); 

to make sure that the intended element is ready for use ...

more to delay an event handler you can use .setTimeOut() or in some cases .delay()

Answer 4

First set the buttons to hide, then do a jquery load on the sheet, as this is what the background image applies

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