Show Ajax content when the content is fully loaded

2 Views

I have a little problem with a script. In my WordPress page I change the navigation so, that on click the content fades out, a spinner shows up and then the new posts are loaded over jQuery.load, content fades in.

What I saw now, that the fade in shows to fast. The content is still loading (mostly iframes). I tried to use the load event before it fires the fade in of the new content but it will not work. Here’s the code:

Read More
//LOAD SPINNER - Fade out when content loaded on Frontpage!
$(window).load(function() {
    // Animate loader off screen
    $(".spinner").fadeOut(300);
    $("#showpage").fadeIn(2000);
});  

jQuery('.pagination a').live('click', function(e) { //check when pagination link is clicked and stop its action.
    e.preventDefault();
    var link = jQuery(this).attr('href'); //Get the href attribute
    jQuery('#ajaxcontent').fadeOut(500, function() { //fade out the content area
        jQuery(".spinner").show(); // show the loader animation
    }).load(link + ' #main', function() {
        jQuery('#ajaxcontent').fadeIn(500, function() { //load data from the content area from      paginator link page that we just get from the top
                jQuery(".spinner").hide(); //hide the loader
            }); 
        });     
    });

I tried to insert a load function after the .load(link + #main Function) before the fade in because I want the fade in when #main is fully loaded. But it doesn’t work or I don’t know how to do it.

Working test-site: http://www.peyotedesign.ch/indie

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. The function ready should fix it: .ready()

    The code has to look something like this:

    jQuery( document ).ready(function( $ ) {
    $(".spinner").fadeOut(300);
    $("#showpage").fadeIn(2000);
}

    Worked several times for me. Like the description says the functions is executed after the DOM is loaded.

  2. try 

    document.body.onload

    or

    $(document).ready(function() {
        // Animate loader off screen
        $(".spinner").fadeOut(300);
        $("#showpage").fadeIn(2000);
    });

    Thanks