कैरोसेल के अंदर स्लाइड की आलसी लोड सामग्री (सामग्री oEmbeds/iframes है)

Question

मैं एजेक्स में बूटस्ट्रैप कैरोसेल के साथ एक मोडल/पॉपिन लोड कर रहा हूं जिसमें प्रत्येक स्लाइड है (आलसी लोडिंग के बारे में कई प्रश्नों में एक छवि नहीं है) लेकिन एक आईफ्रेम विभिन्न सोशल नेटवर्क्स से ओमेड से (facebook, instagram, twitter, ...)।

समस्या यह है कि जब मैं मोडल को लॉड करने वाले बटन पर क्लिक करता हूं, तो सभी स्लाइड सामग्री लोड हो जाती हैं, जो 15 से 20 ऑम्बेड (प्रत्येक सामग्री सामग्री, छवि और जावास्क्रिप्ट लोड कर रहा है ...) कहती है।

मैं इसके बारे में चालाक होना चाहता हूं और स्लाइड द्वारा केवल "आलसी लोड" स्लाइड या 3 स्लाइड्स द्वारा स्मार्ट 3 स्लाइड भी करना चाहता हूं।

मैं केवल जानकारी के लिए उल्लेख कर रहा हूं कि मैं scrollMonitor और Hubspot Messenger का उपयोग कर रहा हूं। लेकिन मैं प्रत्येक स्लाइड के एपिरिशन/लोड या किसी भी सुझाव के ट्रिगर को ट्रिगर करने के लिए बूटस्ट्रैप स्लाइड ईवेंट का उपयोग करना चाहता हूं।

मैं वापस अंत भाषा

oEmbed का यूआरएल के रूप में रेल पर गहरे लाल रंग का उपयोग कर रहा हूँ प्रोग्राम के रूप में बदलने के रूप में वे एक व्यवस्थापक Backoffice से inputed है और प्रत्येक अनुच्छेद/पृष्ठ पर बदल लेकिन आप एक उदाहरण के नीचे मिल जाएगा:

page.html

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

page.js में HubSpot मैसेंजर के साथ लोड मॉडल

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> 

मैं आलसी लोड करने के लिए पुस्तकालयों के टन देखा है छवियों और यहां तक ​​कि कभी-कभी स्क्रिप्ट/आइफ्रेम भी होते हैं, लेकिन उन्हें सभी को सीधे ब्लॉक में कुछ कक्षाएं जोड़ने की ज़रूरत होती है, जो मेरे लिए कोई मदद नहीं है क्योंकि मैं उपरोक्त अंडे का उपयोग करता हूं और मेरे पास इन आलसी वर्गों को रखने के लिए कहीं भी नहीं है।

मुझे इसे इन oEmbeds iframes के साथ काम करने की आवश्यकता है।

Answer 1

उन आकृतियों को आलसी लोड करने के लिए जिन्हें आपको उन्हें डीओएम में प्रस्तुत करने के बजाय उन्हें सरणी में जोड़ने की आवश्यकता है, और एक बार उन सभी को लोड किया गया है (सफलतापूर्वक या नहीं) तो आप उस सरणी का उपयोग केवल डोम में प्रस्तुत करने के लिए कर सकते हैं वर्तमान स्लाइड

यहाँ एक उदाहरण है:

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) जब भी स्लाइड हिंडोला द्वारा बदल दिया गया है कहा जाता है, यकीन है कि जा रहा है की जरूरत है कि सूचकांक (शून्य -आधारित) नई स्लाइड के फ़ंक्शन के पैरामीटर के रूप में पारित किया जाता है।

आपको .carousel-inner .item सीएसएस कक्षा में डिफ़ॉल्ट न्यूनतम चौड़ाई और न्यूनतम ऊंचाई जोड़ने की आवश्यकता हो सकती है ताकि कैरोसेल घटक पहले से आयामों को जान सके, क्योंकि स्लाइड (एम्बेड) उसके बाद आलसी लोड हो जाएंगी।