Lazy ładuje zawartość slajdów w karuzeli (zawartość jest oEmbeds/iframes)

Question

Załaduję w ajax modal/popin z karuzelą Bootstrap, w której każdy slajd jest (nie obraz jak w wielu pytaniach o leniwym ładowaniu), ale iframe z oEmbed z różnych serwisów społecznościowych (facebook, instagram, twitter, ...).

Problem polega na tym, że po kliknięciu przycisku, który ładuje modalny, WSZYSTKIE slajdy zostają załadowane, to jest od 15 do 20 oembed (każdy z nich ładuje tekst zawartości, obraz i javascript ...).

Chciałbym być sprytny i tylko "leniwe ładowanie" slajdów przez slajd lub jeszcze bardziej inteligentne 3 slajdy po 3 slajdy.

Po prostu wspomniałem również ze względu na informacje, które używam scrollMonitor i Hubspot Messenger. Ale wolałbym używać zdarzeń slajdów Bootstrap, aby wywołać pojawienie się/obciążenie każdego slajdu lub jakiejkolwiek sugestii.

Używam Ruby on Rails jak język back-end

URL interfejsu oEmbed programowo zmienić, ponieważ są one inputed z Admin Backoffice i zmienić na każdy artykuł/strona ale znajdziesz poniżej przykładzie:

page.html

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

obciążenia Modal z HubSpot Messenger w page.js

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

modal.html.erb = Modal z karuzeli i Odtwarzacze umieszczone z uĹĽyciem społecznych (tu może być do 50 z nich)

<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> 

Widziałem mnóstwo bibliotek do leniwego obciążeniem obrazy, a nawet czasami skrypty/iframe, ale wszystkie muszą bezpośrednio dodać pewne klasy w bloku, co nie jest dla mnie pomocne, ponieważ używam oembed powyżej i nie mam gdzie nigdzie umieścić tych leniwych klas.

Muszę sprawić, aby działał z tymi elementami iframe oEmbeds.

Answer 1

Do leniwego ładowania osadzania należy dodać je do tablicy, zamiast renderować je w DOM, a gdy wszystkie zostaną załadowane (pomyślnie lub nie), można użyć tej tablicy do renderowania tylko w DOM obecny slajd.

Oto przykład:

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 ***/ 
    } 
} 

Wreszcie you'lll trzeba dodać hak do komponentu karuzeli tak że renderEmbedSlide(index) nazywa, gdy suwak jest zmieniana przez karuzelę, upewniając się, że wskaźnik (zero na podstawie nowego slajdu jest przekazywany jako parametr do funkcji.

Może być również konieczne dodanie domyślnej szerokości min i wysokości minimalnej do klasy CSS .carousel-inner .item, aby składnik karuzeli znał wcześniej wymiary, ponieważ slajdy (osadzenia) będą później leniwie obciążane.