Tôi đang tải trong ajax một phương thức/popin với băng chuyền Bootstrap trong đó mỗi trang trình bày (không phải là hình ảnh như nhiều câu hỏi về tải chậm) từ oEmbed từ các mạng xã hội khác nhau (facebook, instagram, twitter, ...).Nội dung tải trọng của các trang trình bày bên trong băng chuyền (nội dung là oEmbeds/iframe)
Vấn đề là khi tôi bấm vào nút mà laods phương thức, TẤT CẢ nội dung trang trình bày được tải, đó là để nói 15 đến 20 oembeds (mỗi người trong số họ tải nội dung văn bản, hình ảnh và javascript ...).
Tôi muốn thông minh về điều đó và chỉ "tải chậm" bằng cách trượt hoặc thậm chí thông minh hơn 3 trang trình bày theo 3 trang trình bày.
Tôi cũng đang đề cập đến vì lợi ích của thông tin mà tôi đang sử dụng scrollMonitor và Hubspot Messenger. Nhưng tôi muốn sử dụng các sự kiện trượt Bootstrap để kích hoạt hiện tượng/tải của mỗi trang trình bày hoặc bất kỳ gợi ý nào bạn có.
Tôi đang sử dụng Ruby on Rails như ngôn ngữ back-end
Url của oEmbed lập trình thay đổi khi chúng được inputed từ một quản trị BackOffice và thay đổi theo từng Điều/trang nhưng bạn sẽ tìm thấy bên dưới một ví dụ:
page.html
//button to click to make modal appear
<a class="btn btn-primary" onclick="loadModal()" id="socialStoryModal">
load modal
</a>
tải Modal với Hubspot messenger trong 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 với băng chuyền và nhúng xã hội (ở đây có thể lên đến 50 trong số họ)
<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>
Tôi đã nhìn thấy tấn của các thư viện để tải lười biếng hình ảnh và thậm chí đôi khi kịch bản/iframes nhưng tất cả họ cần phải có trực tiếp thêm các lớp nhất định tôi n khối, đó là không giúp đỡ cho tôi như tôi sử dụng oembed ở trên và tôi không có nơi nào để đưa các lớp học lười biếng.
Tôi cần làm cho thiết bị hoạt động với các iframe có đèn lồng này.
cảm ơn, nó đã hoạt động – Mathieu