Remplacer une image avec une autre image par ajax la fait disparaître pendant une fraction de seconde

Question

J'ai le code suivant (asp.net-mvc, jquery) (j'ai simplifié l'exemple pour montrer le problème) où je veux cliquer sur un image et faites-le remplacer par une autre image.

Cela fonctionne très bien mais la première fois que je clique dessus, l'image originale disparaît (pendant une fraction de seconde) avant que l'autre image n'apparaisse. Après cela, cela fonctionne parfaitement.

Y at-il un moyen d'éliminer cette anomalie afin qu'il n'y ait pas de fraction de seconde où aucune image n'est affichée?

Voici mon code de commande:

public ActionResult UpdateFavoriteExercise(int id, string toggle) 
    { 
     if (toggle == "off") 
     { 
      return Content("<img toggle='off' src='/images/vote-favorite-off1.png' border=0'>"); 
     } 
     return Content("<img toggle='on' src='/images/vote-favorite-on1.png' border=0'>"); 
    } 

Voici mon code jquery:

$('div.favoriteExercise').live('click', function() { 

    var id = $(this).attr("id"); 

    var toggle = $(this).attr("toggle"); 
    if (toggle == 'off') { 
     onOff = 'on'; 
    } 
    else { 
     onOff = 'off'; 
    } 

    var url = '/Tracker/UpdateFavoriteExercise/' + id + '?toggle=' + onOff; 

    $(this).load(url); 
    $(this).attr("toggle", onOff); 
}); 

Answer 1

Vous pouvez essayer précharger la nouvelle image with javascript, without javascript ou with css.

Une autre option consiste à utiliser sprites pour que ensure l'image soit déjà chargée.

Ce ne sont que quelques trucs que vous pouvez essayer, il y a beaucoup plus si vous faites un peu de googler :)

En fait, je suggère d'utiliser un sprite unique sur un seul élément, puis en utilisant background-position dans le CSS pour changer le focus. De cette façon, vous pouvez simplement ajouter/supprimer une seule classe de l'élément, sans avoir à ajouter/supprimer de nouveaux éléments et faire toute cette logique de test.