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

well, i think that maybe you are making things too complicated. I'm not really sure why you're using css background when the images could be inside a tag. You say the reason is because your images are dynamically created... and i dont understand that.

What you could do is create a page that returns the images, maybe you could use some parameter... something like the image size:

http://www.mysite.com/create_image.php?size=200x100&id=img1

then all you need to do is put this url inside the SRC of the img tag... If you want to, you could pre-load the image when the page is loaded..or when your slider is moving

Or maybe i didn't understood your problem =D

Answer 2

You can you a css trick instead of some long javascript code.
Here you can do it like this:

HTML:

<ul id="slideshow-container">
  <li><div id="image1"></div></li>
  <li><div id="image2"></div></li>
  <li><div id="image3"></div></li>
  <li><div id="image4"></div></li>
</ul>

CSS:

#slideshow-container>li{
  background-image:url('loading.gif')
}

#slideshow-container>li>div{
  width:100%;
  height:100%;
}

#slideshow-container>li>div{
  background-color:transparent;
}

#image1{
  background-image:url('image1.jpg');
}

#image2{
  background-image:url('image2.jpg');
}

#image3{
  background-image:url('image3.jpg');
}

#image4{
  background-image:url('image4.jpg');
}

Explanation:
The Images of the slideshow will be the background of div contained in the li. Until the images are loaded the background will be transparent, which will show the background of the li which is the animated loading gif.
In simple terms loading image of li will be shown until slideshow image contained in the div is loaded.

Answer 3

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:

    <!-- Page Elements -->

    <div id="background-loading"> // Background image of spinner
      <div id="slider-case"> // Container of slider
        <ul id="slider-content">
          <li class="slider-image"></li>
          <li class="slider-image"></li>
          <li class="slider-image"></li>
        </ul>
      </div>
    </div>

    <!-- Script -->

  // 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.

Answer 4

It looks for elements with src attribute or backgroundImage css property and calls an action function when theirs images loaded.

/**
 * Load and wait for loading images.
 */
function loadImages(images, action){
    var loaded_images = 0;
    var bad_tags = 0;        

    $(images).each(function() {
    //alert($(this).get(0).tagName+" "+$(this).attr("id")+" "+$(this).css("display"));
        var image = new Image();
        var src = $(this).attr("src");
        var backgroundImage = $(this).css("backgroundImage");            
        // Search for css background style
        if(src == undefined && backgroundImage != "none"){
            var pattern = /url\("{0,1}([^"]*)"{0,1}\)/;                
            src = pattern.exec(backgroundImage)[1];                
        }else{
            bad_tags++;
        }
        // Load images
        $(image).load(function() {
            loaded_images++;                
            if(loaded_images == ($(images).length - bad_tags))
                action();
        })
        .attr("src", src);
    });
}

Answer 5

Well, I think things may be simpler if you just use img tags, but if you do want to use background images then I could only come up with a work around.

The trick is to create a new image (using the Javascript image object), and make sure it's loaded, but this image isn't displayed. Once the image is loaded and in the cache, that image will be available as a background image in your gallery.

So, all you have to do is make sure that you only change the background image of the LI of an image after the corresponding image is loaded. You can load all LIs with a default "loading" image initially.

So your code would be something like:

HTML (the style definitions for the loading image could be in your external style sheet):

<ul>
<li id="pic1" style="background-image:url('images/loading.gif')"></li>
<li id="pic2" style="background-image:url('images/loading.gif')"></li>
<li id="pic3" style="background-image:url('images/loading.gif')"></li>
...
</ul>

Your jQuery / Javascript:

var img = new Array();

// The following would be in some sort of loop or array iterator:

var num = [NUMBER] // You'd use this number to keep track of multiple images.
  // You could also do this by using $("ul>li").each() and using the index #

img[num] = new Image();

  // Specify the source for the image
var imgSource = "http://yourimage.com/example.jpg";

  // only append the corresponding LI after the image is loaded
img[num].onload = function() {
    $("#pic" + num).attr("style", "background-image:url('" + imgSource + "')");
};

img[num].src = imgSource;​

You would have to have the appropriate CSS / ids etc for each LI, and you would have to adapt the above to the loop or function you use to show your gallery.

Here's a jsFiddle example. (for testing purposes it's a big image, so it takes a while to load).