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

Question

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

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

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

问题

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

JS Fiddle 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>');
        }
    });   
});

关于如何循环这个有什么建议吗？

谢谢！

Answer 1

像下面这样的东西怎么样

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]);
}

Answer 2

一个选项是在目标 DIV 中将视频 URL 设置为 data-xxx，添加一个常用的 CSS class 名称 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', ...) 将找到所有具有 class 名称 playButton 的播放按钮并附加事件。找到包含 div.video-container 的内容以替换为视频 iframe。

Answer 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自动判断元素个数而不是使用静态整数

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

Lazy Loading: DIV onClick, hide element, add iFrame. Cant figure out the loop process

html

javascript

css

iframe

jquery