loading gif image stops before the Iframe content is fully loaded in colorbox

the problem i am facing is that the loading animated spin image stops before the content is fully loaded in the modal popup. what i mean is that, due to heavy data retrieval from the server(a aspx page), the page takes fews seconds to load the content in the modal, what i see in the page is a blank white space instead of the loading spin. is there any way i could make the loading image work till the content is fully loaded.

the route i chose is to use the event in colorbox, i wasn't sure i can achieve it.

  $('#cboxLoadingGraphic').show();

this one calls the loading image from colorbox

onLoad: function() { $('#cboxLoadingGraphic').show();}, 
    onComplete: function() {  if($(this) !=开发者_如何学运维 "undefinded"){ $('#cboxLoadingGraphic').show();} }, 

the above code wont work because at first the element is empty and it moves to .show() method.what i want to acheive is either on the onComplete or onload, how can i check using js/jquery that the content or the element is loaded fully so that i can show() if the content is loading and hide() when the content is fully loaded.

thanks.

Are you using the iframe property? If so, in colorbox 1.3.16 you can set the fastIframe property to false to delay the removal of the loading graphic until the iframe element's onload event fires. Example:

$('a.myIframe').colorbox({iframe:true, width:500, height:500, fastIframe:false});

I modified the colorbox source code with minor change.

@loadingOverlay

is the one that loads the loading gif image. for iframe i hide it till the content is fully loaded.

 $(iframe).load(function() { $loadingOverlay.hide(); }); 

for the rest (like inline) i hide is here.

complete = function () {
                     if(!settings.iframe) 
                      { $loadingOverlay.hide(); }
                    // $loadingOverlay.hide();
                        trigger(event_complete, settings.onComplete);
                    };

if you are using IFRAME then set fastIframe property of colorbox to false; It will display the loading image.

Try putting the loading spin as high up on the page as possible and then call $('.loading-image').hide() in the $(window).load(function() { }) handler.

In your colorbox initialization, show the loader graphic like the following:

$.colorbox({
    iframe:true, 
    width:300, 
    height:300, 
    href:'iframe_url_here',

    onComplete:function(){ 
        $('#cboxLoadingGraphic').show(); 
    }
});

And in your iframe source, add the following in your document ready function like this:

$(document).ready(function() {
    parent.$('#cboxLoadingGraphic').hide();
}

You can use $("#cboxLoadingOverlay") since it will be hidden after colorboxContent is loaded

 onOpen: function() {
                $("#cboxLoadingOverlay").html("<img width='128' src='/images/loaders/ajax-loader.gif' alt='Loading....'/>")
    }