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

问题描述

我的主页上有四个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);
    });
  };
});

解决方法

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

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

let currentVid = video[i];