Need help loading content via ajax

Question

Consider the following script:

  $(".workSnippet").click(function () {

    //set variable portfolioCount based on index

    portfolioCount = $(".workSnippet").index(this);

    //load content based on portfolioCount

    $('#work #cycle' + portfolioCount).load("ajax-content/ajax-content.php #portfolioImage" + portfolioCount);

    // when loaded, run animation functions 

    $("#work").ajaxComplete(function(){

        //help required here

        setTimeout(invokeMultipleCycle, 200);

        showWork();

    });

On my page, there are multiple 'thumbnails' called .workSnippet. When you click one of these, I want it to load content via ajax. It selects what content to load in conjunction with the index function. I have this working absolutely fine.

The problem is, it's a little messy. When you click .workSnippet it runs an animation, however the high quality image loads slowly whilst the animation is taking place.

What I want to do:

1. Wait for the ajax request to complete before loading the functions invokeMultipleCycle and showWork.

2. Before the animation occurs, add an ajax loading animation absolutely positioned above .workContent.

Please bear in mind two things:

1. There are multiple .workSnippets on the page.
2. The content is not loaded in workSnippet, but another div called #work.

You will see I have already tried to attempt this uses the ajaxComplete function. However, it does not seem to work. Perhaps this is because the ajax request completes but the image still needs to 'load'?

Your help will be most appreciated.

Thanks,

Steve

Answer 1

Perhaps this is because the ajax request completes but the image still needs to 'load'?

Yes. You have to do the animation after the images load. I can't think of a way to do that off the top of my head; I think looking into something similar to document.ready() is the solution.