如何解决延迟加载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];
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。