时间戳

首页 > 解决方案 > 延迟加载 vimeo 仅适用于数组中的最后一个

javascript - 延迟加载 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);
    });
  };
});

标签： javascriptjquerylazy-loadingvimeo

解决方案

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

对此的简单修复是使用let关键字声明变量，以使其在循环内保持范围：

let currentVid = video[i];

推荐阅读