Javascript 加载一个函数后再加载另一个函数
我遇到了一个等高脚本问题,该脚本使我的4个div在一行中的高度相等。在一个div中,我有neosmart stream,它在div中加载我最新的facebook帖子。另一个div的高度应该与这个div的高度相匹配,问题是div的高度与第一个加载的最高div相匹配,其中一个有目录图片 我希望能够在我的facebook帖子加载后运行equal heights脚本。 以下是该网站的链接: 适用于旋转横幅下方的4个深灰色方框 对不起,我犯了一个大错误,没有提供代码。以下是相等高度的代码:Javascript 加载一个函数后再加载另一个函数,javascript,jquery,css,equal-heights,Javascript,Jquery,Css,Equal Heights,我遇到了一个等高脚本问题,该脚本使我的4个div在一行中的高度相等。在一个div中,我有neosmart stream,它在div中加载我最新的facebook帖子。另一个div的高度应该与这个div的高度相匹配,问题是div的高度与第一个加载的最高div相匹配,其中一个有目录图片 我希望能够在我的facebook帖子加载后运行equal heights脚本。 以下是该网站的链接: 适用于旋转横幅下方的4个深灰色方框 对不起,我犯了一个大错误,没有提供代码。以下是相等高度的代码: <scr
<script>
equalheight = function(container){
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {
$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}
$(window).load(function() {
equalheight('.module');
});
$(window).resize(function(){
equalheight('.module');
});
</script>
相等高度=函数(容器){
var=0,
currentRowStart=0,
rowDivs=新数组(),
$el,
顶置=0;
$(容器)。每个(函数(){
$el=$(此项);
$($el).height('auto')
topPostion=$el.position().top;
if(currentRowStart!=topPostion){
对于(currentDiv=0;currentDiv
以下是facebook帖子的代码:
<div class="module">
<h1>News</h1>
<script type='text/javascript' src='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-includes/jquery.js'></script>
<script type='text/javascript' src='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-core/jquery.neosmart.stream.js'></script>
<link href='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-core/core.css' type='text/css' rel='stylesheet' />
<link href='http://www.guitarworldcityarcade.com.au/neosmart-stream/nss-content/themes/base/style.css' type='text/css' rel='stylesheet' />
<script type='text/javascript'>(function(window){window.onload=function(){jQuery(function(){jQuery('#nss').neosmartStream({introFadeIn:695,masonry:false,cache_time:60,theme:'base',path:'http://www.guitarworldcityarcade.com.au/neosmart-stream/',channel_group:'all',auto_refresh:true,auto_refresh_time:60})})}})(window);</script>
新闻
(function(window){window.onload=function(){jQuery(function(){jQuery('#nss'))。neosmartStream({introFadeIn:695,massey:false,cache_time:60,主题:'base',路径:'http://www.guitarworldcityarcade.com.au/neosmart-stream/,频道组:'all',自动刷新:true,自动刷新时间:60}}(窗口);
这只是脚本的一部分,facebook帖子是一个插件。这四个div具有.module类
其中一个有window.load(function())和另一个window.onload=function(),它们会冲突吗?有没有一种方法可以将一个设置为在另一个之后加载这么多毫秒?我不知道您当前的代码是什么,因为您没有发布任何代码片段,但您可能只想尝试经典表。或者,您可能希望尝试将每个容器设置为100%高度(css),并让它们彼此相邻浮动。如果这不能解决您的问题,您可能希望通过一些代码片段来改进您的问题,而不是让我们来完成所有的工作。如果您使用的是Facebook Javascript SDK,那么您应该能够使用异步代码并分配高度函数在window.fbAsyninit函数中运行。然而,您可能仍然需要等待CSS和样式的应用,然后才能知道您所追求的真实高度
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
如果您使用的是jQuery,则可以在
$(窗口)中填充大小调整器脚本。加载事件,如下所示:
$(window).load(function(){
// Your resize code
});
这样,浏览器将等待整个页面(图形、图像和iFrame)加载,然后再触发调整器脚本
这意味着,如果任何东西被挂起,比如说,用户在2G网络上,或者外部资源无法加载,那么您的盒子将永远不会调整大小。不过,我以前用过它,只要你知道它的风险,这是一个简单、快速的解决方法。我用这个有点作弊。页面加载和调整大小时,“调整大小”脚本将激活。因此,我添加了另一个事件侦听器,以便在用户向下滚动时脚本激活。这是因为在所有屏幕和设备上,调整大小的框都在折叠的下方(除了超长的屏幕,但你多久会遇到一次?)
我必须正确地解决这个问题,但现在可以了。您有代码吗?我们可以在这里看到,而不是在您的站点中查找。您可能需要找到正确的load
事件来侦听,然后运行脚本,但我建议您发布facebook帖子的加载方式,以便我们可以查看选项。如果neosmart流支持事件,您可以侦听加载的事件并运行等高脚本。