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);
});