延迟加载 vimeo 仅适用于数组中的最后一个

Question

我的主页上有四个 Vimeo 视频，这使页面变慢了。我想延迟加载它们。我试图让他们找到视频缩略图，并且仅在单击缩略图时加载完整视频。

到目前为止，当页面上只有一个视频时，我可以让它工作。但是，当有多个时，最后一个会获取所有缩略图，只有这个会在点击时加载视频。

我认为这与我对全局变量的使用有关，但由于 ajax 调用 vimeo 服务器的范围，我不确定如何让它工作。

$(document).on('turbolinks:load', function() {
  var video = document.querySelectorAll(".lazy-video");
  // var currentVid;

  for (var i = 0; i < video.length; i++) {
    // set current video global
    currentVid = video[i]

    // get and add image thumbnail
    $.ajax({
      type: 'get',
      url: 'https://vimeo.com/api/v2/video/' + currentVid.dataset.embed + '.json',
      dataType: 'json',
      success: function(data) {
        var image = new Image();
        image.src = data[0]["thumbnail_large"];
        debugger;
        currentVid.appendChild(image);
      }
    })

    // listen for click
    currentVid.addEventListener("click", function() {
      var iframe = document.createElement("iframe");
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("allowfullscreen", "");
      iframe.setAttribute("src", "https://player.vimeo.com/video/" + this.dataset.embed + "?autoplay=1&color=0083B2&portrait=0");
      this.innerHTML = "";
      this.appendChild(iframe);
    });
  };
});

Answer 1

你说得对，问题与范围有关。由于您没有在变量定义中使用 var 关键字，它在全局范围内，因此它的值在每次迭代中都会发生变化。因此只有最终视频受到影响，因为当 AJAX 调用完成时循环早已结束。

解决这个问题的简单方法是使用 let 关键字声明变量，以使其在循环中保留作用域：

let currentVid = video[i];

延迟加载 vimeo 仅适用于数组中的最后一个

lazy loading vimeo only works on last in array

javascript

jquery

lazy-loading

vimeo