延迟加载：DIV onClick，隐藏元素，添加 iFrame。无法弄清楚循环过程答案

【问题标题】：Lazy Loading: DIV onClick, hide element, add iFrame. Cant figure out the loop process延迟加载：DIV onClick，隐藏元素，添加 iFrame。无法弄清楚循环过程
【发布时间】：2021-12-04 02:12:45
【问题描述】：

我有一个网页，其中包含来自不同来源的 30 个 iFrame 视频。

这导致加载时间非常长，所以我想创建一种延迟加载。

因此，在页面加载时，它会显示带有播放按钮叠加层的视频图像。使用 JavaScript/Jquery OnClick，它将添加 iFrame，并隐藏图像。

问题

我不知道如何循环这个函数，这样我就可以避免复制 Javascript 30 多次。

JS 小提琴 https://jsfiddle.net/wmLdabon/

HTML

<div class="embed-responsive embed-responsive-16by9" id="iframeHolder1">
  <div class="playButtonContainer" style="height:300px;width:100%;padding-top: 24%;background-image:url(https://i.insider.com/5c79a8cfeb3ce837863155f5?width=700&format=jpeg&auto=webp);background-repeat: no-repeat;">
    <div class="playButton" id="playButton1">Play Video</div>
  </div>
</div>

<div class="embed-responsive embed-responsive-16by9" id="iframeHolder2">
  <div class="playButtonContainer" style="height:300px;width:100%;padding-top: 24%;background-image:url(https://i.insider.com/5ea6fd9dd553f808ba5bf897?width=700&format=jpeg&auto=webp);background-repeat: no-repeat;">
    <div class="playButton" id="playButton2">Play Video</div>
  </div>
</div>

JAVASCRIPT

//First video
$(function(){
    $('#playButton1').click(function(){ 
        if(!$('#iframe').length) {
                $('#iframeHolder1').html('<iframe class="embed-responsive-item" style="height:300px; width:100%" src="https://www.youtube.com/embed/kujV1qHr1ow" allowfullscreen></iframe>');
        }
    });   
});

//Repeat for 2nd video.
$(function(){
    $('#playButton2').click(function(){ 
        if(!$('#iframe').length) {
                $('#iframeHolder2').html('<iframe class="embed-responsive-item" style="height:300px; width:100%" src="https://www.youtube.com/embed/WDlu1OhvYBM" allowfullscreen></iframe>');
        }
    });   
});

关于如何循环播放有什么建议吗？

谢谢！

【问题讨论】：

标签： javascript html jquery css iframe

【解决方案1】：

一个选项是将目标DIV中的视频URL设置为data-xxx，添加一个通用的CSS类名video-container进行查找

<div class="embed-responsive embed-responsive-16by9 video-container" data-video="https://www.youtube.com/embed/kujV1qHr1ow">
  <div class="playButtonContainer" style="height:300px;width:100%;padding-top: 24%;background-image:url(https://i.insider.com/5c79a8cfeb3ce837863155f5?width=700&format=jpeg&auto=webp);background-repeat: no-repeat;">
    <div class="playButton" id="playButton1">Play Video</div>
  </div>
</div>

<div class="embed-responsive embed-responsive-16by9 video-container" data-video="https://www.youtube.com/embed/WDlu1OhvYBM">
  <div class="playButtonContainer" style="height:300px;width:100%;padding-top: 24%;background-image:url(https://i.insider.com/5ea6fd9dd553f808ba5bf897?width=700&format=jpeg&auto=webp);background-repeat: no-repeat;">
    <div class="playButton" id="playButton2">Play Video</div>
  </div>
</div>
<script>

$('.playButton').on('click', function() {
    const container = $(this).closest('.video-container');
    const video = container.data('video'); // The video URL
    container.html(<make your code segment>);
});

$('.playButton').on('click', ...) 将找到类名为playButton 的所有播放按钮并附加事件。找到包含 div.video-container 的内容以替换为视频 iframe。

【讨论】：

感谢您抽出宝贵时间回答我的问题。您的代码运行良好，我喜欢它不依赖 ID 的方式，这样可以更轻松地添加更多视频。谢谢！ :)

【解决方案2】：

像下面这样的东西怎么样

var addIFrame = function(btnId, frameId, src){
    $(btnId).click(function(){ 
        if(!$('#iframe').length) {
                $(frameId).html('<iframe class="embed-responsive-item" style="height:300px; width:100%" src="' + src + '" allowfullscreen></iframe>');
        }
    });   
};

var youtubeURL[] = { //array of youtube SRC}
for(let i=0; i <30; i++){
   var btnId = "playButton" + (i+1);
   var frameId = "iframeHolder" + (i+1);
   
   addIFrame(btnId, frameId, youtubeURL[i]);
}

【讨论】：

感谢您抽出宝贵时间回答我的问题并提供此解决方案。它完美地工作:)

【解决方案3】：

这可能会有所帮助

var addIFrame = function(btnId, frameId, src){
    $(btnId).click(function(){ 
        if(!$('#iframe').length) {
                $(frameId).html('<iframe class="embed-responsive-item" style="height:300px; width:100%" src="' + src + '" allowfullscreen></iframe>');
        }
    });   
};

var youtubeURL = []; // empty array for the iframe urls
for(let i=0; i < $(".embed-responsive").length ; i++){
   var btnId = "playButton" + (i+1);
   var frameId = "iframeHolder" + (i+1);
   
   addIFrame(btnId, frameId, youtubeURL[i]);
}

使用$(".embed-responsive").length自动确定元素个数，而不是使用静态整数

【讨论】：