轮播内幻灯片的延迟加载内容（内容为oEmbeds/iframes）

Posted 2023-02-22

【中文标题】轮播内幻灯片的延迟加载内容（内容为oEmbeds/iframes）

【英文标题】：Lazy load content of slides inside carousel (content is oEmbeds/iframes)

【发布时间】：2017-06-29 02:08:39

【问题描述】：

我在 ajax 中加载带有 Bootstrap 轮播的模式/popin，其中每张幻灯片都是（不是许多关于延迟加载的问题中的图像）而是来自各种社交网络的 oEmbed 的 iframe（facebook、instagram , twitter, ...)。

问题是，当我单击加载模式的按钮时，所有幻灯片内容都会被加载，也就是说 15 到 20 个 oembeds（每个都加载内容文本、图像和 javascript...）。

我想聪明一点，只“延迟加载”幻灯片，甚至更智能的 3 幻灯片 3 幻灯片。

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

我使用 ruby​​ on rails 作为后端语言

oEmbed 的 url 以编程方式更改，因为它们从管理员后台输入并在每个文章/页面上更改，但您会在下面找到一个示例：

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 一起使用。

【参考方案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 .item CSS 类添加默认的最小宽度和最小高度，以允许轮播组件事先知道尺寸，因为幻灯片（嵌入）此后将被延迟​​加载。