javascript - 需要延迟加载 iframe

Question

我有一个响应式视频墙，可以从 youtube channel 获取最新视频并将其显示在页面上。我需要延迟加载 iframe。

我已经达到了 iframe 延迟加载响应图像代替它们的地步，直到被点击。我遇到的问题是无论我做什么，当您单击一个图像加载 iframe 时，所有 iframe 都会加载到其余图像下方。我需要单独的缩略图来触发它下面的 iframe。我知道网站上有类似的解决方案，所以请不要标记为重复，因为这些解决方案不适合此代码。

https://codepen.io/anon/pen/mZWZOe

我目前没有错误，并尝试添加类等，但如果您单击任何缩略图，循环仍会加载所有 iframe。

 <style>    
 body {
  background: -webkit-radial-gradient(rgb(248, 248, 248), rgb(129, 171, 212));
  background: radial-gradient(rgb(248, 248, 248), rgb(129, 171, 212));
}

.youtubevideowrap{
width: 80%;
max-width: 640px;
margin: 0 auto 20px;
}
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

.video-container iframe, .video-container object, .video-container     embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
     .covers{
     position:relative;
     width:100%;
     top:-50px;
}
</style> 


<div class="youtubevideowrap">
<div class="video-container">
<iframe class="latestVideoEmbed" cid="UCsxtaXJZu0Af01AfcZiFMpA" width="600" height="340" frameborder="0" allowfullscreen></iframe>
 </div>
</div>  
<div class="youtubevideowrap">
<div class="video-container">   
<iframe class="latestVideoEmbed" vnum='1' cid="UCsxtaXJZu0Af01AfcZiFMpA" width="600" height="340" frameborder="0" allowfullscreen></iframe>
</div>
</div>
 <div class="youtubevideowrap">
<div class="video-container">
<iframe class="latestVideoEmbed" vnum='2' cid="UCsxtaXJZu0Af01AfcZiFMpA" width="600" height="340" frameborder="0" allowfullscreen></iframe>
 </div>
</div>  
<div class="youtubevideowrap">
<div class="video-container">   
<iframe class="latestVideoEmbed" vnum='3' cid="UCsxtaXJZu0Af01AfcZiFMpA" width="600" height="340" frameborder="0" allowfullscreen></iframe>
</div>
</div>
 <div class="youtubevideowrap">
<div class="video-container">
<iframe class="latestVideoEmbed" vnum='4' cid="UCsxtaXJZu0Af01AfcZiFMpA" width="600" height="340" frameborder="0" allowfullscreen></iframe>
 </div>
</div>  
<div class="youtubevideowrap">
<div class="video-container">   
<iframe class="latestVideoEmbed" vnum='5' cid="UCsxtaXJZu0Af01AfcZiFMpA" width="600" height="340" frameborder="0" allowfullscreen></iframe>
</div>
</div>



<script>
var reqURL = "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent("https://www.youtube.com/feeds/videos.xml?channel_id=");
function loadVideo(iframe){
    $.getJSON( reqURL + iframe.getAttribute('cid'),
      function(data) {
     var videoNumber = (iframe.getAttribute('vnum')?        Number(iframe.getAttribute('vnum')):0);
        console.log(videoNumber);
     var link = data.items[videoNumber].link;
     id = link.substr(link.indexOf("=") + 1);  
    $(iframe).parent().append( "<img class='covers' src='https://img.youtube.com/vi/"+id + "/0.jpg'>" );
    $(iframe).attr('vid', ''+id);
    $('.covers').click(function(){
        $(this).css("display","none");
        var vid = (iframe.getAttribute('vid'));
    $(iframe).attr("src","https://youtube.com/embed/"+vid + "?rel=0&autoplay=1&autohide=1&modestbranding=1"); });

  }
   );
} 
var iframes = document.getElementsByClassName('latestVideoEmbed');
for (var i = 0, len = iframes.length; i < len; i++){
   loadVideo(iframes[i]);
}
</script>

Answer 1

首先，我建议不要再使用 jQuery 进行这种简单的 dom 操作。

要解决这个问题，我建议创建一个 img 元素，而不是为 cover 元素传入一个字符串，然后简单地将 click 直接绑定(bind)到 img 元素。所以你的加载框架函数看起来像这样:

function loadVideo(iframe){
    $.getJSON( reqURL + iframe.getAttribute('cid'),
      function(data) {
         var videoNumber = (iframe.getAttribute('vnum')?Number(iframe.getAttribute('vnum')):0);
        console.log(videoNumber);
         var link = data.items[videoNumber].link;
         id = link.substr(link.indexOf("=") + 1);  

        // Create Element
        const coverImg = document.createElement('img');
        coverImg.classList.add('covers')
        coverImg.setAttribute('src', 'https://img.youtube.com/vi/' + id +   '/0.jpg')


        $(iframe).parent().append(coverImg); // Append the new element
        $(iframe).attr('vid', ''+id);
        $(coverImg).click(function(evt){ //Bind the click directly to the new cover image element
            $(this).css("display","none");
            var vid = (iframe.getAttribute('vid'));
        $(iframe).attr("src","https://youtube.com/embed/"+vid + "?rel=0&autoplay=1&autohide=1&modestbranding=1"); });

      }
   );
}