Замена одного изображения другим через ajax заставляет его исчезнуть на долю секунды

Question

У меня есть следующий код (asp.net-mvc, jquery) (я упростил пример, чтобы показать проблему), где я хочу щелкнуть изображение и заменить его другим изображением.

Это работает нормально, но при первом нажатии на него исходное изображение исчезает (на долю секунды), прежде чем появляется другое изображение. После этого он работает без проблем.

Есть ли способ устранить эту причуду, чтобы не было доли секунды, когда изображение не отображается?

Вот мой код контроллера:

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

Вот мой код 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

Вы можете попробовать предварительно загрузить новое изображение с помощью JavaScript , без JavaScript или с помощью CSS .

Другой вариант - использовать спрайтов , которые гарантируют изображение уже загружено.

Это всего лишь несколько трюков, которые вы можете попробовать, если вы немного погуглите, их будет гораздо больше:)

На самом деле, я бы предложил использовать один спрайт для одного элемента, а затем использовать background-position в CSS для переключения фокуса. Таким образом, вы можете просто добавить / удалить отдельный класс из элемента, без необходимости добавлять / удалять новые элементы и выполнять всю эту логику тестирования.