I have the following code (asp.net-mvc, jquery) (i have simplified the example
to show the issue) where i want
to click on an image and have it replaced with another image.
This works fine but the first time i click it, the original image disappears (for a split second) before the other image shows up. After that it works seamlessly.
Is there any way
to eliminate this quirk so there is not split second where no image is shown?
Here is my controller code:
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'>");
}
Here is my jquery code:
$('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);
});
