轮播内幻灯片的懒惰加载内容（内容是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类以允许轮播组件事先知道尺寸，因为此后将会载入幻灯片（嵌入）。