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

Question

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.

Answer 1

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);
                    };