My preload script doesn't work completely

Question

I made a preloader to load in some content with tables and custom scrollbars while a Loading Div covers the area. After that is finished, the load div should disappear.

For some reason the preload disappears before the content is finished loading.

If you try out this demo and click the button at the very top that says venues, you might notice that it doesn't completely wait for everything to be configured before the load div dissapears. Some people may even see the old content for a second or two.

Here is the code I used below. I included comments as well.

jQuery(document).delegate(".topCanBeActive", "click", function( e ) {
    e.preventDefault();

    // this just handles the css class of buttons
    jQuery(".topCanBeActive").removeClass("topActive");

    // this just handles the css class of buttons
    jQuery(this).addClass("topActive");

    var pageToLoad = '';
    switch( this.id ) {
        case 'all_events_button':
            $('#partypreloader').fadeIn('fast', function() {
                pageToLoad = 'events.html';
                configureEvents();
            });
            break;
        case 'all_venues_button': // this is the venues button
            // fade in 'loading' div
            $('#partypreloader').fadeIn('fast', function() {
                pageToLoad = 'venues.html';

                // configure tables etc
                configureVenues();
            });
            break;
        case 'event_finder_button':
            pageToLoad = 'search.html';
            break;
    }
    if( '' !== pageToLoad ){
        // just in case, I added the same function
        // to load the preload div here
        $('#partypreloader').fadeIn('fast', function() {
            // load the chosen content in desired div
            $('#whole-ajax-content-one').load( pageToLoad, function() {
                // fade out the preload div
                configureFadeOut();
            });
        });
    }
});

Here's the configureEvents function, notice I also used some fake loading to cover up the issues.

function configureEvents() {
    window.setTimeout(function() {
        $('#whole-ajax-content-one').load('events.html', function() {

            // configure table
            $("#myTable").tablesorter({
                headers: {
                    0: { sorter: false }
                },
                widgets: ['zebra']
            });

            window.setTimeout(function() {
                // Configure scrollbar
                $('.scroll-pane').jScrollPane();

                // Configure table again - I had issues with this
                // so I did it twice
                $("#myTable").tablesorter({
                    headers: {
                        0: { sorter: false }
                    },
                    widgets: ['zebra']
                });

                // Set CSS class for buttons
                jQuery("#all_events_button").addClass("topActive");
                jQuery("#today_button").addClass("timeframeActive");
            }, 150);
        });

        // Preload div fades out
        $("#partypreloader").fadeOut("slow");
    }, 200);
}

I revised the code to make the preload work to such levels that the code is as complicated as it is. If you spot out something that seems off, please let me know. Thanks a lot everyone :)

Answer 1

This is your current code:

function configureEvents() {

    window.setTimeout(function() {

        $('#whole-ajax-content-one').load('events.html', function() {
            // other code
        });

        $("#partypreloader").fadeOut("slow");

    }, 200);

}

As you can see, the fadeOut call is outside of the load() callback, which means that the fade-out occurs immediately - it doesn't wait for the load event.

Try putting it inside the load callback (at the end):

function configureEvents() {

    window.setTimeout(function() {

        $('#whole-ajax-content-one').load('events.html', function() {
            // other code

            $("#partypreloader").fadeOut("slow");
        });        

    }, 200);

}

---

Btw, what's the time-out for?

Answer 2

Is this your current code? Then maybe the load in if (just after switch) is faster then this very complicated configureEvents of yours? Thus configureFadeOut fires first (by the way: why do you load the same data twice?). If this is the case, then content is loaded but not configured just as we see it. And since browsers cache data, then this only happens once.

So what is my advice? Refactor this code. First of all each button in the menu should have its own content - a unique div. You will load the data to the div. Using jQuery .data you will set the div to loaded so every other click will not trigger ajax (unless there is a reason to do so, like very dynamic data). Then clicking between buttons will only change css display (or fire fadeIn - fadeOut).

Next thing: why do you use delegate? First of all this is obsolete (use on) and second: does menu change during its lifetime? If it does not, then there is no point.

Finally: get rid of those setTimeouts. Write simple code like this:

show preloader --> on fadeIn callback load data -->
--> on load callback do some stuff -->
--> hide preloader

That's all I can say at the moment. I hope it helps a bit. If it does not, then I can only wish you luck! :)