Calling an action in .ajax success timing incorrect

Calling an action in .ajax success timing incorrect

Hello,

I am performing a .ajax request, and as part of my success am calling two functions, loadPanes() which creates the different content panes and pushes them to the page, and removeLoader() which removes a div with a loading graphic to hide the content as it is being loaded and stacked on top of each other.

It would seem that removeLoader() is being called before loadPanes() has a chance to finish though, as it is possible to see the content being loaded on the page (i.e. the loading graphic div is removed before the content below it has finished loading). Any input as to why this is happening? Thanks! Here is the code in question:

        $('#canvas').append('<div class="loading"></div>'); // add loading div
        $.ajax({
              url: '/daring-minds/spotlight.json',
              dataType: 'json',
              success: function(data) { loadPanes(data); removeLoader(); }   
            });

function removeLoader() {
        $('div.loading').detach();
    }
   
    /* load panes into spotlight */
    function loadPanes(data) {
       
        var currentSpotlight = '0';
        /* construct navigation for spotlight */
        var peopleNav = '';
        $.each(data.stories, function(i,person){
            if ( i == 0 ) { var li = '<li><a class="selected" href="' + i + '"><img src="' + person.thumbnail + '" /></a></li>'; }
            else { var li = '<li><a href="' + i + '"><img src="' + person.thumbnail + '" /></a></li>'; }
            peopleNav += li;
        });
        peopleNav = '<div id="people-select"><ul>' + peopleNav + '</ul></div>';
   
        /* construct spotlight elements */
        var peopleContainer = '';
        $.each(data.stories, function(i,person){
            var portraitDiv = '';
            //console.log(person.backgroundImage);
            $.each(person.tooltipContent, function(j,tTip){
                var TT = tTip.tooltip;
                var TTHtml = '<div class="button li-' + j + '"><div class="button-img"><div class="button-text"></div></div><div class="hover-tooltip"><div class="top"></div><div class="left"></div><div class="bottom"></div><div class="right"></div><div class="tail"></div><div class="tt-text">' + TT + '</div></div></div>';
                portraitDiv += TTHtml;
            }); // end each
       
            var personDiv = '<div class="canvas-portrait person-' + i + '"><div id="hover-items">' + portraitDiv + '</div></div>';
            peopleContainer += personDiv;
       
        }); // end each
   
        var spotlightDiv = peopleContainer + peopleNav;
        $(spotlightDiv).appendTo('#canvas');
   
        /* hover elements */
        var opacitySupport = jQuery.support.opacity;
        if ( opacitySupport ) { // not IE
            $('.hover-tooltip').addClass('visible');
            $('.button .button-img').hoverIntent(
                function() {
                    $(this).addClass('above').next('div.hover-tooltip').stop(false, true).animate({ opacity: .9, left: '-=10' }, 250 );
                },
                function() {
                    $(this).removeClass('above').next('div.hover-tooltip').stop(false, true).animate({ opacity: 0, left: '+=10'}, 250 );
                }
            );
        } else { // IE
            $('.button .button-img').hover(
                function() {
                    $(this).next('div.hover-tooltip').addClass('ieVisible');
                },
                function() {
                    $(this).next('div.hover-tooltip').removeClass('ieVisible');
                }
            );
        }
   
        /* click behaviour for navigation */
        $('#people-select li a').click( function(event) {
            event.preventDefault();
       
            $('#people-select li a').removeClass('selected');
            $(this).addClass('selected');
                       
            var index = $(this).attr('href');
            if (index == currentSpotlight) { return false; }
            //console.log(index);
            else {
                $('.person-' + index).css('z-index', '950');
                //$('.canvas-portrait').not('.person-' + index).not('.person-' + currentSpotlight).css('z-index', '900');
                $('.person-' + currentSpotlight).animate({
                    opacity: 0
                }, 500, function() {
                    $('.person-' + index).css('z-index', '1000');
                    $('.canvas-portrait').not('.person-' + index).css('z-index', '900').css('opacity', '1');
               
                    //$('.person-' + currentSpotlight).css('opacity', '1');
                });
            }
            //$('div.canvas-portrait').css('z-index', '900');
            currentSpotlight = index;
            //console.log(currentSpotlight)
        });
        /* end click behaviour for navigation */
    }
    /* end loading panes */