Retarder l'image du préchargeur jquery

Question

Le problème est que, lorsque je clique sur le lien, l'image de chargement prend au moins 5 secondes avant qu'elle ne s'affiche. Je voudrais le montrer immédiatement, je clique sur le lien avant que le contenu montre.

Voici la jquery; Après beaucoup d'agitation j'ai trouvé la réponse à la question. Pour une raison quelconque, si vous placez le chargeur au-dessus de toutes les autres fonctions, il se chargera facilement et immédiatement.

Ainsi, au lieu du code ci-dessus, je ne

$(function() { 
    $("li#tabs.popup a").click(function(e) { 
     $('#popup').html('<center><img src="images/loader.gif" /></center>'); 
     $("#popup").slideDown().addClass('active'); 
     $('#popup').load('wishlist.php'); 
     $('li#tabs.popup a').removeClass('selected'); 
     $(this).addClass('selected'); 
     e.stopPropagation(); 
    }); 
}); 

maintenant il fonctionne tout simplement parfait!

Answer 1

Je suppose que cela se produit parce que lorsque vous commencez à afficher l'image en tant que contenu html, il se charge, puis apparaît. Vous pouvez déjà le charger sur votre page, par exemple:

<div id="popup"> 
    <div id="spinner"> <!-- Assuming that it has display: none in CSS --> 
     <center><img src="images/loader.gif" alt="Loading..." /></center> 
    </div> 

    <!-- Load the content here. --> 
</div> 

Et votre script ressemblerait

$(function() { 
    $("li#tabs.popup a").click(function(e) { 
     $('#popup').find('#spinner') 
        .show() 
        .end() 
        .load('wishlist.php') 
        .slideDown() 
        .addClass('active'); 

     $('li#tabs.popup a').removeClass('selected'); 
     $(this).addClass('selected'); 

     e.stopPropagation(); 
    }); 
}); 

Sidenote: Et vous n'avez pas vraiment d'écrire $('li#tabs'), simplement $('#tabs') (Si vous définissez le sélecteur sur li#tabs, Sizzle filtre le résultat de document.getElementById('tabs') pour voir si le nom de l'élément correspondant est li

Answer 2

Vous êtes le titre est un peu confus, mais il semble que vous voulez vraiment précharger votre image préchargement :)

Nous avons utilisé this script dans le passé pour faire en sorte que toutes les références d'image dans notre css sont pré-chargés. Je voudrais alors changer votre animation de "préchargement" pour utiliser css (vous pouvez définir l'image d'arrière-plan à votre gif animé) plutôt que de créer une étiquette d'image à la volée.