旋转木马内幻灯片的延迟加载内容(内容为oEmbeds/iframes)

Question

我加载在一阿贾克斯与引导旋转木马,其中每个幻灯片(而不是像在约延迟加载很多问题),但透过oEmbed来自不同社交网络的iframe莫代尔/人口信息网(Facebook的,Instagram的,叽叽喳喳,...) .

问题是,当我点击提示模式的按钮时,所有幻灯片内容都会被加载,也就是说15到20个oembeds(每个都加载内容文本,图像和javascript ......).

我想要聪明一点,只有"懒加载"滑动幻灯片,甚至更聪明的3张幻灯片3张幻灯片.

我只是为了提供信息而提到我正在使用scrollMonitor和Hubspot Messenger.但我宁愿使用Bootstrap幻灯片事件来触发每张幻灯片的幻影/加载或任何你想要的建议.

我在rails上使用ruby作为后端语言

oEmbed的url以编程方式更改,因为它们是从Admin Backoffice输入并在每个Article/page上更改,但您将在下面找到一个示例:

page.html中

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

在page.js中使用Hubspot Messenger加载模态

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>

我已经看到大量的库延迟加载图像甚至有时候脚本/ iframe但他们都需要直接添加块中的某些类,这对我来说没有任何帮助,因为我使用上面的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 ***/
  }
}

最后,你需要为你的轮播组件添加一个钩子,这样renderEmbedSlide(index)只要轮播改变幻灯片就会调用它,确保新幻灯片的索引(从零开始)作为参数传递给函数.

您可能还需要向.carousel-inner .itemCSS类添加默认的最小宽度和最小高度,以允许轮播组件预先知道尺寸,因为此后幻灯片(嵌入)将延迟加载.