Take the 2-minute tour ×

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.


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.


share|improve this question
you might want to post the code you have so we can see how to fix it. –  Chad Apr 28 '11 at 17:54

6 Answers 6

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});
share|improve this answer
up vote 1 down vote accepted

I modified the colorbox source code with minor change.


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 () {
                      { $loadingOverlay.hide(); }
                    // $loadingOverlay.hide();
                        trigger(event_complete, settings.onComplete);
share|improve this answer

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.

share|improve this answer
the loading spin is part of the colorbox. i never called it explicitly. but i could call inside the events like onLoad but it didn't work. i need that animated image to be loaded till the content is fully loaded. so i didn't understand y should i hide the loading image. –  jero Apr 28 '11 at 18:00
I edited my post. load is the event handler you are looking for. You hide the loading image once that handler calls, so it goes away once the page is loaded. –  Max Apr 28 '11 at 18:13
the loading image should occur inside the modal popup. –  jero Apr 28 '11 at 21:15
Try using jQuery and load event on the window object as I've shown and then see if that fixes it. –  Max Apr 28 '11 at 21:49
thanks, let me try. –  jero Apr 28 '11 at 23:55

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



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

$(document).ready(function() {
share|improve this answer

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

share|improve this answer

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....'/>")
share|improve this answer

Your Answer


