- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我在 ajax 中加载一个带有 Bootstrap 轮播的模态/popin,其中每张幻灯片都是(不是关于延迟加载的许多问题中的图像),而是来自各种社交网络( facebook , instagram , twitter ,。 ..).
问题是,当我单击加载模式的按钮时,所有幻灯片内容都会被加载,也就是说 15 到 20 个 oembed(每个都加载内容文本、图像和 javascript ...)。
我想聪明一点,只“延迟加载”幻灯片或更智能的 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
});
}
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>
我见过大量用于延迟加载图像的库,有时甚至是脚本/iframe,但它们都需要直接在 block 中添加某些类,这对我没有帮助,因为我在上面使用了 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 ***/
}
}
最后,您需要向轮播组件添加一个钩子(Hook),以便在轮播更改幻灯片时调用 renderEmbedSlide(index)
,确保索引(从零开始) ) 作为参数传递给函数。
您可能还需要向 .carousel-inner .item
CSS 类添加默认的最小宽度和最小高度,以允许轮播组件预先知道尺寸,因为幻灯片(嵌入) 之后将被延迟加载。
关于javascript - 轮播内幻灯片的延迟加载内容(内容是 oEmbeds/iframes),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42164257/
我正在使用一个简单的脚本来延迟加载页面上的所有图像;图像源的路径包含在 data-src 属性中,然后放入 img 标记的实际 src 属性中。几乎大多数(?)延迟加载方法的实现都是如何工作的。 这是
我有一个具有多层 (SKNodes) 背景、游戏层、前景和 HUD 的场景,每个场景中都有多个 SKSpriteNode,用于滚动和您可以收集和点击的对象。 hud 层只有一个 SKSpriteNod
我有一个 Controller 函数来创建一些东西。调用该函数时,将运行 setInterval 来获取项目的状态。 这是服务: (function () { 'use strict';
在我的应用程序中,我播放音频直播,延迟非常重要。我正在使用 AVPlayer,但启动需要 5-6 秒,并且我需要最多 3 秒的延迟。我怎样才能更快地开始播放并减少延迟?设置一个小缓冲区就可以了?如何使
我有一个恼人的问题。我有这个简单的服务器代码(比方说): #!/usr/bin/env python3 import wsgiref.simple_server def my_func(env, st
我是 jquery deferreds 的新手。这里我有一个简单的example 。 谁能告诉我为什么在其他函数完成之前就触发完成函数(“现在是我的时间”)? 这里的人 example还创建一个延迟对
正在放置关闭 之前的标签标记相同的 sa 将它们放在 中部分并指定 defer="defer"属性? 最佳答案 是/否。 是的,因为放置 defer 标签会等到文档加载完毕后再执行。 否,因为放置
我知道Javascript没有delay(500)方法,它会延迟执行500毫秒,所以我一直试图通过使用setTimeout和setInterval来解决这个问题。 for(var i =0; i< 1
我们有一个读写主服务器和复制的从读服务器。在某些网络用例中,数据被发布并立即读取以发送回服务器。立即读取是在读取从属设备上完成的,由于延迟,数据尚未在那里更新。 我知道这可能是复制设置的一个常见问题,
我有以下 dag 设置以从 2015 年开始运行追赶。对于每个执行日期,任务实例在一分钟内完成。但是,第二天的任务仅在 5 分钟窗口内开始。例如。上午 10:00、上午 10:05、上午 10:10
当我在 WatchKit 中推送一个新 Controller 并在新 Controller 的awakeWithContext: 方法中使用 setTitle 时,它需要一秒钟左右来设置标题,直到
我将图像显示为 SVG 文件和文本。 出于某种原因,svg 图像的渲染速度比屏幕的其余部分慢,从而导致延迟,这对用户体验不利。 这种延迟正常吗?我该怎么做才能让整个屏幕同时呈现? Row( ma
我正在考虑在我的应用程序中使用 firebase 动态链接。我需要将唯一标识符从电子邮件生成的链接传递到用户应用程序中。当用户安装了应用程序时,这可以正常工作,但是,我对未安装应用程序的方式有些困惑。
您知道如何使用 JQuery 的延迟方法和一个函数来检测所有已更改的表单并将每个表单作为 Ajax 帖子提交吗? 如果我只列出大量表单提交,我可以得到同样的结果,但如果我使用... $('form.c
我需要一种方法来通过回调获取不同的脚本。这个方法工作正常: fetchScripts:function() { var _this=this; $.when( $.aj
我编写了一个 jquery 脚本,允许我淡入和淡出 div,然后重复。该代码运行良好。但是,当我尝试添加延迟(我希望 div 在淡出之前保持几秒钟)时,它无法正常工作。我尝试在代码中的几个地方添加延迟
我正在努力在延迟、带宽和吞吐量之间划清界限。 有人可以用简单的术语和简单的例子来解释我吗? 最佳答案 水比喻: 延迟 是穿过管子所需的时间。 带宽是管有多宽。 水流量为吞吐量 车辆类比: 从源到目的地
我有一个 CRM 系统,当添加联系人时,我想将他们添加到会计系统中。 我在 CRM 系统中设置了一个 Webhook,将联系人传递给 Azure 函数。 Azure 函数连接到会计系统 API 并在那
我有一个 Android AudioTrack,例如: private AudioTrack mAudioTrack; int min = AudioTrack.getMinBufferSize(sa
我正在 React 中开发一个 TODO 应用程序,并尝试构建将删除选中项目延迟 X 秒的功能,并且如果在这段时间内未选中该框,它将不会被删除。 我遇到的主要问题是当用户在同一 X 秒内检查、取消检查
我是一名优秀的程序员,十分优秀!