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

【问题标题】：lazy loading vimeo only works on last in array延迟加载 vimeo 仅适用于数组中的最后一个
【发布时间】：2020-11-30 23:56:55
【问题描述】：

我的主页上有四个 Vimeo 视频，这会减慢页面速度。我想延迟加载它们。我试图让他们找到视频缩略图，并且只有在点击缩略图时才加载完整的视频。

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

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

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

【问题讨论】：

使用let currentVid = video[i];在循环中保留当前视频的范围，并在AJAX调用完成后。
谢谢！那行得通。我知道这与范围有关，但我对 JS 还不够熟悉。我想是时候阅读 let 了
很高兴它有帮助。我添加它作为你的答案

标签： javascript jquery lazy-loading vimeo

【解决方案1】：

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

解决此问题的简单方法是使用 let 关键字声明变量，以使其在循环内保持范围：

let currentVid = video[i];

【讨论】：