我正在使用jquery将来自不同源的两个不同元素加载到两个不同的div中。这将替换那些特定div中已有的内容。加载的第一个元素较小,加载速度较快,并在第二个元素加载完成之前显示。有没有办法加载'第一个元素,但实际上没有显示它,直到第二个元素加载完毕,所以两个元素同时显示?
这是我的代码:
$(this).attr('target','multiplayer_window');
$('#gl_current_header').load(gl_data.site_url + parser.pathname + ' #gl_member_header > *');
$('#multiplayer_window').load(function(){
//do some stuff;
});
我正在尝试同时显示#gl_current_header和#multiplayer_window。
我尝试过使用jquery的.promise(),。done()并尝试用.delay()逼近加载时间,但我还没有想出来一个有效的解决方案。
感谢您的帮助。
答案 0 :(得分:1)
使用promises,你最初可以隐藏它们,将内容加载到它们中,然后当两个内容都可用时,你会显示它们:
await()
这是一个不做任何显示/隐藏的选项(因此页面不会分散注意力)。它将$(this).attr('target','multiplayer_window');
var def1 = $.Deferred();
$('#gl_current_header').hide().load(gl_data.site_url + parser.pathname + ' #gl_member_header > *', def1.resolve);
var def2 = $.Deferred();
$('#multiplayer_window').hide().load(function(){
//do some stuff;
def2.resolve();
});
$.when(def1, def2).then(function() {
// both are done here
$('#gl_current_header, #multiplayer_window').show();
});
内容加载到不可见的div中,然后当它和iframe完成时,该内容将传输到可见的页面元素。
#gl_current_header
答案 1 :(得分:0)
var url1Data = null;
var url2Data = null;
$.get("url1", function(data) { url1Data = data; if(url2Data != null) showData(); });
$.get("url2", function(data) { url2Data = data; if(url1Data != null) showData(); });
function showData()
{
$('#gl_current_header').html(url1Data);
$('#multiplayer_window').html(url2Data);
}
答案 2 :(得分:0)
我想出了一个似乎可以顺利完成我需要它的解决方案。
我创建了一个带有.holding-tank类的额外隐藏div,并将更小,更快的加载元素加载到其中。然后,当较慢的加载元素完成加载时,.holding-tank显示为.show(),而原始div被隐藏。然后移除.holding-tank类并将其放置在原始div上。这样,可以重复该过程,在当前未使用的div之间交替。
$(this).attr('target','multiplayer_window');
if ($('#gl_current_header').hasClass('holding-tank')){
$('#gl_current_header').hide().load(gl_data.site_url + parser.pathname + ' #gl_member_header > *');
$('#multiplayer_window').load(function(){
$('#gl_current_header_alt').hide();
$('#gl_current_header').show();
// do other stuff
$('#gl_current_header_alt').addClass('holding-tank');
$('#gl_current_header').removeClass('holding-tank');
});
} else if ($('#gl_current_header_alt').hasClass('holding-tank')){
$('#gl_current_header_alt').hide().load(gl_data.site_url + parser.pathname + ' #gl_member_header > *');
$('#multiplayer_window').load(function(){
$('#gl_current_header').hide();
$('#gl_current_header_alt').show();
//do other stuff
$('#gl_current_header').addClass('holding-tank');
$('#gl_current_header_alt').removeClass('holding-tank');
});
}