带有一个精灵的 Javascript 照片幻灯片

Question

我刚刚为幻灯片编写了一段 js 代码，仅使用一张图像（精灵）。使用 js，我正在更改背景位置以更改可见图像。

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);
  });
}

受影响的html是这样的。使用一个放置背景图像的 css 类，一组垂直图像。每个图像的高度为 200 像素。

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

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

我所做的是定期循环增加 div 的背景 Y 位置。所以看起来这改变了形象。 这个想法是使用精灵来最小化页面的加载时间，而不是加载 10 个图像。 你认为我有什么可以改进的地方吗？谢谢。

Answer 1

精灵最适合小图标 - 而不是大画廊。

如果您有 600kb 的精灵，那么在整个内容下载完成之前您将无法显示第一张图像（例外）。

我通常会避免使用大型 JPEG 精灵，而只需执行...

var img = new Image();

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

img.src = 'bob.jpg'; 

这意味着您可以在显示当前图像的同时下载下一张图像，并在知道它已完成下载时切换到它。