Question

I just wrote a js code for a slideshow, using only one image (sprite). With js I’m changing the background position to change the visible image.

var first = true;
function galesprite() {
  if (first) {
    var bg_pos = '0px 0px';
    first = false;
  } else {
    var bg_pos = $("#gmap").css('background-position');
  }

  /* Sub función para cuando termine la animación de fadeOut, sinó la foto se 
   * cambia antes y no crea el efecto deseado. */
  $("#gmap").fadeOut(1000, function() {
    var xy = bg_pos.split(' ');
    var y = xy[1].split('px');
    var newy = parseInt(y) + 200;
    var bgpos = xy[0] + ' ' + newy + 'px';
    $('#gmap').css('background-position', bgpos);
    $("#gmap").fadeIn(1000);
    setTimeout('galesprite()', 4000);
  });
}

And the html affected is this. With a css class that puts the background image, a set of vertical images. Each image has 200px height.

<div id="gmap"></div>

#gmap {
    height: 200px;
    width: 270px;
    background-image: url('../images/diapositiva-home/surf.jpg');
    background-position: 0px 0px;
}

What I do is loop periodicaly increasing the background Y position for the div. So it seems that changes the image.
The idea is minimize the loading time of the page using the sprite instead of loading 10 images.
Do you see anything I could improve? Thanks.

Answer 1

Sprites are best for small icons – not large galleries.

If you have a 600kb sprite, then you won’t be able to show the first image until the whole thing has downloaded (with exception).

I generally avoid sprites for large JPEGs, and simply do a…

var img = new Image();

img.onload = function() {
   // Loaded, we can now show the next image
}

img.src = 'bob.jpg'; 

This means you can download the next image whilst showing the current one, and switch to it when you know it has finished downloading.