Почему это слайд-шоу мерцает? - PullRequest
Новая
       1

Почему это слайд-шоу мерцает?

1 голос
/ 20 сентября 2010

Я разместил образец слайд-шоу jQuery в своем блоге здесь: robertmarkbramprogrammer.blogspot.com/2010/09/jquery-slideshow.html

В Chrome мерцает каждое изображение. В IE и Firefox это выглядит хорошо, а в автономной версии это тоже нормально (даже в Chrome) http://robertmarkbram.appspot.com/content/javascript/jQuery/example_slideshow.html

Это вопрос jQuery: 

<script type="text/javascript">
   // ------
   // ###### Edit these.
   // Assumes you have images in path named 1.jpg, 2.jpg etc.
   var imagePath = "images";  // Relative to this HTML file.
   var lastImage = 5;         // How many images do you have?
   var fadeTime = 4000;       // Time between image fadeouts.
 
   // ------
   // ###### Don't edit beyond this point.
   var index = 1;
   function slideShow() {
      $('#slideShowFront').show();
      $('#slideShowBack').show();
      $('#slideShowFront').fadeOut("slow")
            .attr("src", $("#slideShowBack").attr("src"));
      index = (index == lastImage) ? 1 : index + 1;
      $("#slideShowBack").attr("src", imagePath + "/" + index + ".jpg")
      setTimeout('slideShow()', fadeTime);
   }
 
   $(document).ready(function() {
      slideShow();
   });
</script>

Любая помощь будет принята с благодарностью!

Rob :)

1 Ответ

3 голосов
/ 20 сентября 2010

Есть две возможные причины мерцания.

Первая из строки $('#slideShowBack').show();.

Просто удалите эту строку, поскольку она ничего не делает, так как видимость #slideShowBack никогда не изменяется.

Во-вторых, когда вы .show() переднее изображение поверх заднего изображения.Даже если переднее изображение теперь совпадает с задним, оно может вызвать кратковременное мерцание.

Я бы подошел к проблеме немного иначе.

  1. Начните страницу HTML столько одно изображение (это семантически более значимо, поскольку второе изображение не видно ... вы также можете начать со всех изображений в DOM, но это другой подход).
  2. Вызов функции слайд-шоув первый раз с изображением № 2.
  3. Слайд-шоу - добавление нового изображения в DOM за текущим изображением
  4. Слайд-шоу - исчезновение текущего изображения с отображением нового изображения за ним.
  5. Слайд-шоу - Удалите только что поблекшее изображение из DOM.
  6. Слайд-шоу - После паузы вызовите слайд-шоу со следующим изображением

Я бы также включил все ваши переменные и функциив самоназванной анонимной функции, чтобы вы не загромождали глобальное пространство имен: (function() { /* Everything in here */ })();.

Самое важное изменение в коде - это то, что я делаюНе внезапно .show() изображение поверх другого изображения, поэтому нет никакого возможного источника мерцания.Я также использую функцию обратного вызова в .fadeOut().Это просто функция, которая вызывается после завершения замирания:

HTML: 

<div id="slideShow"> 
   <img src="images/1.jpg" /> 
</div>

Javascript: 

  // Contain all your functionality in a self calling anonymous
  //   function, so that you don't clutter the global namespase.
(function() {
    // ------
    // ###### Edit these.
    // Assumes you have images in path named 1.jpg, 2.jpg etc.
    var imagePath = "images";
    var lastImage = 5;         // How many images do you have?
    var fadeTime = 4000;       // Time between image fadeouts.

    // ------
    // ###### Don't edit beyond this point.
    // No need for outer index var
    function slideShow(index) {          
        var url = imagePath + "/" + index + ".jpg";
          // Add new image behind current image
        $("#slideShow").prepend($("<img/>").attr("src",url));
          // Fade the current image, then in the call back
          //   remove the image and call the next image
        $("#slideShow img:last").fadeOut("slow", function() {
            $(this).remove();
            setTimeout(function() { 
                slideShow((index % lastImage) + 1) 
            }, fadeTime);
        });
    }
    $(document).ready(function() {
          // Img 1 is already showing, so we call 2
        setTimeout(function() { slideShow(2) }, fadeTime);
    });
})();

jsFiddle

Вызов следующей функции слайд-шоу:
Вместо index = (index == lastImage) ? 1 : index + 1; вы можете использовать оператор модуля %, чтобы получить остаток от деления, и вместо использования циклической переменнойВы должны установить вне функции slideShow(), просто передать, какую фотографию вы хотите показать в качестве аргумента ... Затем вы можете вызвать следующий showImage в вашем setTimeout с помощью slideShow(current+1).На самом деле, slideShow((index % lastImage) + 1).Лучше использовать анонимную функцию или ссылку с setTimeout вместо eval.

...