Charge séquentielle gif loader gif

Question

Ce que j'essaye de faire est d'avoir un chargeur ajax gif, qui montre alors que les images se chargent dans la page en séquence.

afin que cela fonctionne comme ceci. Ajax loader show - image fadeIn - ajax loader fadeOut - puis passez à l'image suivante. Ajax loader show - image fadeIn - ajax loader fadeOut - puis passez à l'image suivante. Ajax loader show - image fadeIn - ajax loader fadeOut - puis passez à l'image suivante. Ajax loader show - image fadeIn - ajax loader fadeOut - puis passez à l'image suivante.

Continuez à faire cela tout au long de la page.

Voici mon code.

<ul id="clients"> 
    <li><img src="images/logos/clients_03.jpg" width="242" height="152" alt="Taylor Woodrow" /></li> 
    <li><img src="images/logos/clients_04.jpg" width="242" height="152" alt="BG Group" /></li> 
    <li><img src="images/logos/clients_05.jpg" width="242" height="152" alt="Canon" /></li> 
    <li><img src="images/logos/clients_06.jpg" width="227" height="152" alt="department" /></li> 
    <li><img src="images/logos/clients_08.jpg" width="242" height="164" alt="disney" /></li> 
    <li><img src="images/logos/clients_09.jpg" width="218" height="164" alt="xts" /></li> 
    <li><img src="images/logos/clients_10.jpg" width="223" height="164" alt="fisevr" /></li> 
    <li><img src="images/logos/clients_11.jpg" width="227" height="164" alt="hilti" /></li> 
</ul> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script> 
<script> 
$("ul#clients li").append('<img id="show" src="images/ajax-loader.gif" width="32" height="32" alt="fvdsv" />'); 
    $("ul#clients li:eq(0)").show("fast", function() { 
    /* use callee so don't have to name the function */ 
    $(this).next("ul#clients li").fadeIn("slow", arguments.callee); 

    }); 

Il genre de travaux, mais la ajax loader montre à tout le temps de l'aide?

Merci

Answer 1

Eh bien tout d'abord, vous avez id = spectacle img et vous attacher à ce que toutes les images qui n'est pas bon HTML. Les ID devraient être uniques.

Si vous souhaitez afficher le gif ajax alors que l'image est le chargement et après son chargement, afficher l'image et cacher le gif, vous devez utiliser quelque chose comme ceci:

• Ajouter une classe « images » à les images que vous voulez charger en premier et ajouter un affichage de style: aucun.
• Ensuite, ajoutez les gifs ajax directement au html après ces images (ou vous pouvez le faire comme vous l'avez fait dans votre exemple).

Utilisez le code:

$('ul#clients li img.images').load(function() { 
    $(this).next().fadeOut(); 
    $(this).fadeIn(); 
});