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

Question

我正在ajax中加载一个带有Bootstrap旋转木马的modal/popin，其中每个幻灯片都是(不是关于懒惰加载的许多问题中的图像)，而是来自各种社交网络(facebook、instagram、twitter…)的oEmbed的iframe。

问题是，当我点击laods模态的按钮时，所有的幻灯片内容都会被加载，也就是说，15到20个oembed(每个oembed都加载内容文本、图像和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
}); 
}

模式.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，我没有地方放这些延迟类。

我需要让它与这些oEmbeddes 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类添加默认的最小宽度和最小高度，以允许转盘组件预先知道尺寸，因为幻灯片(嵌入)将在此后延迟加载。