为什么我的json文件中的对象最初在点击时以随机顺序加载？

Question

减少测试用例场景中的上下文：我已经构建了一个带有2张幻灯片的滑块，每张幻灯片都有一个名为“视频”的链接。单击时显示另一个<div>，其中包含对象数组（图像）。

问题是什么：当我点击＆＃39;视频＆＃39;链接，图像应按照JSON数组中定义的顺序加载。它们最初以随机顺序加载，然后当我拖动滑块或单击“下一步”＆＃39;上一页＆＃39;用于更改幻灯片的按钮 - 位置自行更正。这是为什么？

减少了测试用例

重现我的问题：

1. 转到简化测试用例

2. 点击名为＆＃39; VIDEOS＆＃39;的滑块内的<div>。

这将滑动另一个滑块 - 它将有图像。图像应该从第一个索引开始，因为它在JSON数组中，但是显示第四个索引。

1. 点击内部滑块内的下一步按钮。

幻灯片将转到包含数字＆＃39; 1＆＃39;的图片，这是正确的顺序。为什么他们最初以随机顺序加载，我该如何解决这个问题？

＆＃13;
＆＃13;
$('.slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  autoplay: false,
  draggable: false,
  adaptiveHeight: true,
  fade: true
});

$('.content').appendTo($('.overlay'));

var imgListPrimary = "";
var imgListSecondary = "";

const jsonUrl = "https://api.myjson.com/bins/19ony6";
$.getJSON(jsonUrl, function(json) {

  $.each(json.initial_slide.images, function() {
    imgListPrimary += '<div><img src= "' + this.src + '"></div>';
  });

  $.each(json.secondary_slide.images, function() {
    imgListSecondary += '<div><img src= "' + this.src + '"></div>';
  });

  $('.videos-slides').slick({
    dots: false,
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 1,
    variableWidth: true,
    draggable: true,
  });

  $('.primary-card .videos-slides').slick('slickAdd', imgListPrimary);
  $('.second-card .videos-slides').slick('slickAdd', imgListSecondary);

});

$(".videos").click(function() {
  $(".videos-slider").slideToggle();
});
＆＃13;
img {
  max-width: 100%;
}

.videos-slider {
  display: none;
  background: #DDD;
}

.slick-dots {
  display: none !important;
}

.videos {
  background: #FFF;
  color: #333;
  padding: 20px;
  box-sizing: border-box;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="container">
  <div class="slider">

    <div class="slide primary-card">

      <div class="row">
        <div class="col-md-12">
          <div class="hero">
            <div class="video-poster">

              <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff&text=SLIDE1" alt="">
            </div>
            <div class="overlay"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="slide second-card">
      <div class="row">
        <div class="col-md-12">
          <div class="hero">
            <div class="video-poster">

              <img id="large" class="img-responsive" src="https://dummyimage.com/600x400/000/fff&text=SLIDE2" alt="">
            </div>
            <div class="overlay"></div>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>

<div class="content">

  <div class="tabs">
    <div class="videos">
      <span class="title">VIDEOS</span>
    </div>

  </div>

  <div id="slide" class="videos-slider">
    <div class="videos-slides">

    </div>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

尝试延迟加载图片：

请注意lazyLoad: true和<img data-lazy=..."

＆＃13;

＆＃13;

$('.slider').slick({
  dots: true,
  infinite: true,
  lazyLoad: 'ondemand',
  speed: 500,
  slidesToShow: 1,
  autoplay: false,
  draggable: false,
  adaptiveHeight: true,
  fade: true
});

$('.content').appendTo($('.overlay'));

var imgListPrimary = "";
var imgListSecondary = "";

const jsonUrl = "https://api.myjson.com/bins/ewjz2";
$.getJSON(jsonUrl, function(json) {

  $.each(json.initial_slide.images, function() {
    imgListPrimary += '<div><img data-lazy= "' + this.src + '"></div>';
  });

  $.each(json.secondary_slide.images, function() {
    imgListSecondary += '<div><img data-lazy= "' + this.src + '"></div>';
  });

  $('.videos-slides').slick({
    dots: false,
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 1,
    variableWidth: true,
    draggable: true,
  });

  $('.primary-card .videos-slides').slick('slickAdd', imgListPrimary);
  $('.second-card .videos-slides').slick('slickAdd', imgListSecondary);

});

$(".videos").click(function() {
  $(".videos-slider").slideToggle();
});

＆＃13;

img {
  max-width: 100%;
}

.videos-slider {
  display: none;
  background: #DDD;
}

.slick-dots {
  display: none !important;
}

.videos {
  background: #FFF;
  color: #333;
  padding: 20px;
  box-sizing: border-box;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="container">
  <div class="slider">

    <div class="slide primary-card">

      <div class="row">
        <div class="col-md-12">
          <div class="hero">
            <div class="video-poster">

              <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff&text=SLIDE1" alt="">
            </div>
            <div class="overlay"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="slide second-card">
      <div class="row">
        <div class="col-md-12">
          <div class="hero">
            <div class="video-poster">

              <img id="large" class="img-responsive" src="https://dummyimage.com/600x400/000/fff&text=SLIDE2" alt="">
            </div>
            <div class="overlay"></div>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>

<div class="content">

  <div class="tabs">
    <div class="videos">
      <span class="title">VIDEOS</span>
    </div>

  </div>

  <div id="slide" class="videos-slider">
    <div class="videos-slides">

    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;