Слайд-шоу исчезают эффект рывков

Мой слайдер изображений работает, за исключением первого поворота изображений, одно изображение дергается. На следующих проходах гладко?

код JavaScript.

var imgArray = [
   'about.jpg',
   'about2.jpg',
   'about3.jpg'],
   curIndex = 0;
   imgDuration = 5000;

function slideShow() {
   document.getElementById('slider').className += "fadeOut";
   setTimeout(function() {
       document.getElementById('slider').src = imgArray[curIndex];
       document.getElementById('slider').className = "";
   },1000);
   curIndex++;
   if (curIndex == imgArray.length) { curIndex = 0; }
      setTimeout(slideShow, imgDuration);
}
slideShow();

код CSS.

#slider {
   opacity:1;
   transition: opacity 1s;
   float:left;
   max-width:100%;
   height:auto;
   margin-right:20px;
   border-radius:4px 4px 4px 4px;
   border-color:#CCC;
   border-style:ridge;
   border-width:2px; 
}

#slider.fadeOut {
   opacity:0;
}

мой сайт.
Посмотреть эффект на моем сайте

Это единственный вовлеченный html.

img id="slider" src="images/other-images/blank.jpg"

Вы можете просмотреть сайт с вашим кодом на месте.
Испытательный Полигон

кенерли, в 20:46 (источник)

1 ответ

  1. Это происходит из-за загрузки изображения.

    Вы можете создать плагин jquery, как показано ниже:

    $.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

$(['about.jpg','about2.jpg','about3.jpg']).preload();

    Таким образом, ваш код будет выглядеть так:

    $.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

var imgArray = [
'about.jpg',
'about2.jpg',
'about3.jpg'],
curIndex = 0;
imgDuration = 5000;

imgArray.preload();

function slideShow() {
    document.getElementById('slider').className += "fadeOut";
    setTimeout(function() {
        document.getElementById('slider').src = imgArray[curIndex];
        document.getElementById('slider').className = "";
    },1000);
    curIndex++;
    if (curIndex == imgArray.length) { curIndex = 0; }
    setTimeout(slideShow, imgDuration);
}
slideShow();

    Iv’E не протестирован, но это показывает, что вам нужно сначала загрузить изображения.

    Одна библиотека, которую я люблю использовать, — это Owl Carousel, которая очень проста в настройке и использовании https://owlcarousel2.github.io/OwlCarousel2/

    Редактировать
    Просто убедитесь, что вы правильно ссылаетесь на изображения в:

    var imgArray = [
'about.jpg',
'about2.jpg',
'about3.jpg']

    так что это может быть:

    var imgArray = [
'/path/to/about.jpg',
'/path/to/about2.jpg',
'/path/to/about3.jpg']