jero
jero

Reputation: 543

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.

Upvotes: 1

Views: 4372

Answers (6)

Youans
Youans

Reputation: 5071

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....'/>")
    }

Upvotes: 0

Manasi
Manasi

Reputation: 11

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

Upvotes: 1

Masum
Masum

Reputation: 1693

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

Upvotes: 0

Jack
Jack

Reputation: 9548

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

Upvotes: 5

jero
jero

Reputation: 543

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

Upvotes: 1

Max
Max

Reputation: 7119

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.

Upvotes: 0

Related Questions