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

Question

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

问题是什么：当我单击“视频”链接时，图像应该按照 JSON 数组中定义的顺序加载。它们最初以随机顺序加载，然后当我拖动滑块或单击“下一个”/“上一个”按钮来更改幻灯片时 - 位置会自行纠正。为什么是这样？

包括减少的测试用例

重现我的问题：

1. 转到简化的测试用例

2. 单击<div>名为“视频”的滑块内部。

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

3. 单击内部滑块内的“下一步”按钮。

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

$('.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();
});

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;
}

<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>

标签： javascriptjqueryjsonslick.js

Answer 1

尝试延迟加载图像：

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

$('.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();
});

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;
}

<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>