延遲加載：DIVonClick，隱藏元素，添加iFrame。無法弄清楚回圈程序

我有一個網頁，其中包含來自不同來源的 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>

爪哇腳本

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

關于如何回圈這個的任何建議？

謝謝！

uj5u.com熱心網友回復：

像下面這樣的怎么樣

var addIFrame = function(btnId, frameId, src){
    $(btnId).click(function(){ 
        if(!$('#iframe').length) {
                $(frameId).html('<iframe  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]);
}

uj5u.com熱心網友回復：

一種選擇是設定視頻的網址在目標DIV與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 的內容。

標籤：javascript html 查询 css 内嵌框架

上一篇：外部Javascript檔案在HTML中不起作用

下一篇：未添加HTML內容