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

Sprites最适合小图标 - 而不是大型画廊。

如果你有一个600kb精灵，那么在整个事情下载之前你将无法显示第一张图像（除了）。

我通常会避免使用大型JPEG的精灵，而只是做一个......

var img = new Image();

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

img.src = 'bob.jpg';

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

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

1 个答案: