同时显示两个独立加载的元件,加载时间不同

时间:2015-05-07 19:38:19

标签: javascript jquery promise

我正在使用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()逼近加载时间,但我还没有想出来一个有效的解决方案。

感谢您的帮助。

3 个答案:

答案 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');
            });    
        }