Ленивое содержание загрузки слайдов внутри карусели (содержимое - oEmbeds/iframes)

Я загружаю ajax modal/popin с карусели Bootstrap, в которой каждый слайд (не изображение, как во многих вопросах о ленивой загрузке), а iframe из oEmbed из различных социальных сетей (facebook, instagram, twitter,...).

Проблема заключается в том, что когда я нажимаю кнопку, которая подменяет модальный, все содержимое слайдов загружается, то есть от 15 до 20 oembeds (каждый из них загружает текст контента, изображение и javascript...).

Я хотел бы быть умным, и только "ленивая нагрузка" скользит слайдом или даже умнее 3 слайда на 3 слайда.

Я просто упоминаю для информации, что я использую scrollMonitor и Hubspot Messenger. Но я предпочел бы использовать события слайда Bootstrap, чтобы вызвать появление/загрузку каждого слайда или любое предложение, которое у вас было бы.

Я использую ruby ​​on rails в качестве исходного языка

URL-адрес oEmbed программно изменяется, поскольку они вводятся из Backoffice администратора и изменяются на каждой статье/странице, но вы можете найти ниже пример:

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>

Я видел множество библиотек для ленивых загрузочных изображений и даже иногда скриптов /iframe, но все они должны иметь прямое добавление определенных классов. Я в блоке, который не помогает мне, поскольку я использую oembed выше, и у меня есть нигде не ставить эти ленивые классы.

Мне нужно заставить его работать с этими iframe iframes.