Besoin d'aide pour le chargement de contenu via ajax

Question

Tenir compte le script suivant:

$(".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(); 

    }); 

Sur ma page, il y a plusieurs «miniatures de .workSnippet appelé. Lorsque vous cliquez sur l'un d'entre eux, je veux charger le contenu via ajax. Il sélectionne le contenu à charger en conjonction avec la fonction d'index. J'ai ce travail très bien.

Le problème est, c'est un peu brouillon. Lorsque vous cliquez sur .workSnippet, une animation est exécutée, mais l'image de haute qualité se charge lentement pendant l'animation.

Ce que je veux faire:

1. Attendez que la demande ajax à complète avant de charger les fonctions invokeMultipleCycle et showWork.

2. Avant que l'animation se produise, ajoutez une animation de chargement ajax absolument positionnée au-dessus de .workContent.

S'il vous plaît garder à l'esprit deux choses:

1. Il y a plusieurs .workSnippets sur la page.
2. Le contenu est et non chargé dans workSnippet, mais un autre div appelé #work.

Vous verrez que j'ai déjà essayé de tenter cela utilise la fonction ajaxComplete. Cependant, cela ne semble pas fonctionner. Peut-être est-ce parce que la requête ajax est terminée mais que l'image doit encore "charger"?

Votre aide sera très appréciée.

Merci,

Steve

Answer 1

Peut-être est ce parce que la demande ajax complète, mais l'image fixe besoins à 'charge'?

Oui. Vous devez faire l'animation après le chargement des images. Je ne peux pas penser à un moyen de le faire du haut de ma tête; Je pense que regarder dans quelque chose de similaire à document.ready() est la solution.