Javascript фото слайд-шоу с одним спрайтом - PullRequest
1 голос
/ 25 ноября 2010

Я только что написал 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;
}

То, что я делаю, - это циклическое увеличение фоновой позиции Y для div. Так что, похоже, что меняется изображение. Идея состоит в том, чтобы минимизировать время загрузки страницы, используя спрайт вместо загрузки 10 изображений. Вы видите что-нибудь, что я мог бы улучшить? Спасибо.

1 Ответ

1 голос
/ 25 ноября 2010

Спрайты лучше всего подходят для маленьких иконок, а не для больших галерей.

Если у вас есть спрайт 600 КБ, то вы не сможете показать первое изображение, пока не загрузится весь файл (за исключением).

Я обычно избегаю спрайтов для больших JPEG,и просто выполните ...

var img = new Image();

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

img.src = 'bob.jpg'; 

Это означает, что вы можете загрузить следующее изображение, показывая текущее, и переключиться на него, когда узнаете, что оно завершило загрузку.

...