轮播内幻灯片的延迟加载内容(内容为 oEmbeds/iframes)
Lazy load content of slides inside carousel (content is oEmbeds/iframes)
我正在 ajax 中加载一个 modal/popin 和一个 Bootstrap 旋转木马,其中每张幻灯片都是(不是许多关于延迟加载的问题中的图像)而是来自 oEmbed 的 iframe来自各种社交网络 (facebook, instagram, twitter, ...).
问题是,当我单击加载模式的按钮时,所有幻灯片内容都会被加载,也就是说 15 到 20 个 oembed(每个都加载内容文本、图像和 javascript。 ..).
我想聪明点,只 "lazy load" 一张一张幻灯片,或者更聪明的 3 张幻灯片一张一张。
我只是为了提供信息而提及我正在使用 scrollMonitor and Hubspot Messenger。但我宁愿使用 Bootstrap 幻灯片事件来触发每张幻灯片的 apparition/load 或您可能有的任何建议。
我在 rails 上使用 ruby 作为后端语言
oEmbed 的 url 以编程方式更改,因为它们是从管理员后台输入的,并且在每个 Article/page 上更改,但您会在下面找到一个示例:
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>
我见过很多延迟加载图像的库,甚至有时 scripts/iframes 但他们都需要直接在块中添加某些 类 ,这对我没有帮助因为我在上面使用 oembed,所以我无处放置这些懒惰的 类.
我需要让它与这些 oEmbeds iframe 一起使用。
要延迟加载嵌入,您需要将它们添加到一个数组中,而不是在 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)
,确保索引 (zero-based)新幻灯片作为参数传递给函数。
您可能还需要为 .carousel-inner .item
CSS class 添加默认的 min-width 和 min-height 以允许轮播组件预先知道尺寸,因为此后将延迟加载幻灯片(嵌入)。
我正在 ajax 中加载一个 modal/popin 和一个 Bootstrap 旋转木马,其中每张幻灯片都是(不是许多关于延迟加载的问题中的图像)而是来自 oEmbed 的 iframe来自各种社交网络 (facebook, instagram, twitter, ...).
问题是,当我单击加载模式的按钮时,所有幻灯片内容都会被加载,也就是说 15 到 20 个 oembed(每个都加载内容文本、图像和 javascript。 ..).
我想聪明点,只 "lazy load" 一张一张幻灯片,或者更聪明的 3 张幻灯片一张一张。
我只是为了提供信息而提及我正在使用 scrollMonitor and Hubspot Messenger。但我宁愿使用 Bootstrap 幻灯片事件来触发每张幻灯片的 apparition/load 或您可能有的任何建议。
我在 rails 上使用 ruby 作为后端语言
oEmbed 的 url 以编程方式更改,因为它们是从管理员后台输入的,并且在每个 Article/page 上更改,但您会在下面找到一个示例:
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>
我见过很多延迟加载图像的库,甚至有时 scripts/iframes 但他们都需要直接在块中添加某些 类 ,这对我没有帮助因为我在上面使用 oembed,所以我无处放置这些懒惰的 类.
我需要让它与这些 oEmbeds iframe 一起使用。
要延迟加载嵌入,您需要将它们添加到一个数组中,而不是在 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)
,确保索引 (zero-based)新幻灯片作为参数传递给函数。
您可能还需要为 .carousel-inner .item
CSS class 添加默认的 min-width 和 min-height 以允许轮播组件预先知道尺寸,因为此后将延迟加载幻灯片(嵌入)。