wait until images in background (css) are loaded

Question

Let\'s say we have a slideshow of pictures. the thumbnails of those pictures are showed in div wrapper with a slider (that I created with Jquery) and each image is included

Answer 1

The solution I use from this is have two layers of elements.

One layer is a case that has the background loading symbol as the background. This is always seen. Then in a second layer above, I place the element with the images and use a jQuery .ready() function with a .delay() and .fade().

Because this is convoluted to explain, I'll show what I do:

    

    
 // Background image of spinner
      
 // Container of slider
        

          

          

          

        
      
    

    

  // Somewhere you have a script that manages the slider
  // Below is the loading animation/image manager
  $(document).ready(function() {
    $('#slider-content').delay(200).animate({opacity:1.0}, 'linear', function(){ 
      $('#background-loading').animate({opacity:0, 'margin-left':'-70px'}, 'linear');
      $('.slider-image').animate({opacity:1.0, 'margin-left':'0em'}, 'linear', function(){});
    });
  });

The delay and fade makes the loading time seem intentional, while the .ready() will wait until the element is completely loaded.

By having a separate background layer, you don't have to worry about manipulating anything in addition to the slider. To add an additional effect, you can make a callback to the image load that does a fade to the loading animation.