輪播內幻燈片的懶惰加載內容（內容是oEmbeds/iframe）

Question

我在ajax中加載了一個帶有Bootstrap輪播的模式/ popin，其中每張幻燈片都是（不是許多關於懶加載問題的圖像），而是一個iframe來自各種社交網絡的oEmbed（facebook,instagram,twitter，...）。

問題是，當我點擊模式按鈕時，所有的幻燈片內容都會被加載，也就是說15到20個（每個都加載內容文本，圖像和JavaScript ...）。

我想聰明一點，只有「懶加載」幻燈片幻燈片，甚至更智能3幻燈片3幻燈片。

我只是爲了提供信息而提及我正在使用scrollMonitor和Hubspot Messenger。但我寧願使用Bootstrap幻燈片事件來觸發幻燈片的幻影/加載或任何建議。

我使用在軌道上作爲後端語言

的透過oEmbed的URL紅寶石編程改變，因爲它們是從一個管理後臺辦公室inputed和改變各條/頁上，但你會發現下面的例子：

page.html中

//button to click to make modal appear 
<a class="btn btn-primary" onclick="loadModal()" id="socialStoryModal"> 
     load modal 
</a> 

與Hubspot Messenger的加載模態在page.js

function loadModal() { 
     var msg; 
     msg = Messenger().post({ 
     message: 'modal.html.erb',/see below the carousel 
     showCloseButton: true, 
     hideAfter: false 
     }); 
    } 

modal.html.erb =莫代爾與旋轉木馬和社會嵌入功能（在這裏可以達到他們的50）

<div id="embeds-carousel" class="carousel slide" data-ride="carousel" data-interval="false"> 

    <div class="carousel-inner" role="listbox">  

     <div class="item active" id="item1" > 
    <script> 
var url = « https://api.instagram.com/oembed?url=https://www.instagram.com/p/5456544654565/"; 
embed_request = { 
     url: url, 
     dataType: "jsonp", 
     cache: false, 
     success: function (data) { 
     try { 
      var embed_html = data.html; 
      $("div#item1").html(embed_html); 
     } catch (err) { 
      console.log(err); 
     } 
     } 
    }; 
$.ajax(embed_request); 
</script> 
</div> 

    <div class="item" id="item2" > 
    <script> 
var url = "https://publish.twitter.com/oembed?url=https://twitter.com/coca/status/546664465342324"; 

embed_request = { 
     url: url, 
     dataType: "jsonp", 
     cache: false, 
     success: function (data) { 
     try { 
      var embed_html = data.html; 
      $("div#item2").html(embed_html); 
     } catch (err) { 
      console.log(err); 
     } 
     } 
    }; 
$.ajax(embed_request); 
</script> 
</div> 

<div class="item" id="item3" > 
    <script> 
var url = "https://publish.twitter.com/oembed?url=https://twitter.com/muse/status/65353453F"; 

embed_request = { 
     url: url, 
     dataType: "jsonp", 
     cache: false, 
     success: function (data) { 
     try { 
      var embed_html = data.html; 
      $("div#item3").html(embed_html); 
     } catch (err) { 
      console.log(err); 
     } 
     } 
    }; 
$.ajax(embed_request); 
</script> 
</div> 


<div class="item" id="item4" > 
    <script> 
var url = « https://api.instagram.com/oembed?url=https://www.instagram.com/p/cftzezeker5/"; 
embed_request = { 
     url: url, 
     dataType: "jsonp", 
     cache: false, 
     success: function (data) { 
     try { 
      var embed_html = data.html; 
      $("div#item4").html(embed_html); 
     } catch (err) { 
      console.log(err); 
     } 
     } 
    }; 
$.ajax(embed_request); 
</script> 
</div> 

<div class="item" id="item5" > 
    <script> 
var url = « var url = "https://www.facebook.com/plugins/post/oembed.json/?url=https://www.facebook.com/cocacola/posts/fdgyez556Yds"; 
"; 
embed_request = { 
     url: url, 
     dataType: "jsonp", 
     cache: false, 
     success: function (data) { 
     try { 
      var embed_html = data.html; 
      $("div#item5").html(embed_html); 
     } catch (err) { 
      console.log(err); 
     } 
     } 
    }; 
$.ajax(embed_request); 
</script> 
</div> 

and so on… 
</div> 
    <!-- Controls --> 
    <a class="left carousel-control" href="#embeds-carousel" role="button" data-slide="prev"> 
    <i class="fa chevron fa-chevron-left "></i> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#embeds-carousel" role="button" data-slide="next"> 
    <i class="fa chevron fa-chevron-right "></i> 
    <span class="sr-only">Next</span> 
    </a> 


</div> 

我見過噸庫來延遲加載圖像，甚至有時腳本/內聯框架，但他們都需要直接添加塊中的某些類，這對我來說沒有任何幫助，因爲我在上面使用了oembed，並且我沒有地方放置這些懶惰的類。

我需要使它與這些oEmbeds iframe一起工作。

Answer 1

爲了延遲加載嵌入，您需要將它們添加到數組中，而不是將它們呈現在DOM中，並且一旦所有這些嵌入已經加載（成功與否），那麼您可以使用該數組僅在DOM中呈現當前的幻燈片。

下面是一個例子：

var oEmbedUrls = [ 
    'https://api.instagram.com/oembed?url=https://www.instagram.com/p/5456544654565/', 
    'https://publish.twitter.com/oembed?url=https://twitter.com/coca/status/546664465342324', 
    'https://publish.twitter.com/oembed?url=https://twitter.com/muse/status/65353453F', 
    'https://api.instagram.com/oembed?url=https://www.instagram.com/p/cftzezeker5/', 
    'https://www.facebook.com/plugins/post/oembed.json/?url=https://www.facebook.com/cocacola/posts/fdgyez556Yds' 
]; 

var oEmbedsHtml = []; 
var doneCount = 0; 
var currentSlideIndex; 

$.each(oEmbedUrls, function(i, url){ 
    $.ajax({ 
     url: url, 
     dataType: "jsonp", 
     cache: false, 
     success: function (data) { 
     var itemIndex = oEmbedsHtml.length; 
     oEmbedsHtml.push(data.html); 
     $('#embeds-carousel .carousel-inner').append('<div class="item" id="item' + itemIndex + '"></div>'); 
     oEmbedUrlResponded(); 
     }, 
     error: function(){ 
     console.warn('oEmbed URL could not be loaded: ', url); 
     oEmbedUrlResponded(); 
     } 
    } 
}); 

function renderEmbedSlide(index){ 
    currentSlideIndex = index; 
    $('#item' + index).html(oEmbedsHtml[index]); 
} 

function oEmbedUrlResponded(){ 
    doneCount ++; 

    // Check if all the URLs have been loaded (successfully or not) when we can now render the carousel and the first slide as well 
    if(doneCount == urls.length){ 
    renderEmbedSlide(0); // Render the first embed 
    /*** CALL HERE THE CODE TO ACTIVATE THE CAROUSEL COMPONENT ***/ 
    } 
} 

最後，you'lll需要一個鉤子添加到您的旋轉木馬組件，以便每當滑片受轉盤改變renderEmbedSlide(index)叫，是確保指數（零基於）的新幻燈片作爲參數傳遞給函數。

您可能還需要向默認的最小寬度和最小高度添加到CSS類以允許輪播組件事先知道尺寸，因爲此後將會載入幻燈片（嵌入）。