jquery - 通过ajax将一张图片替换为另一张图片使其瞬间消失

Question

我有以下代码(asp.net-mvc、jquery)(我简化了示例以显示问题)，我想单击一个图像并将其替换为另一个图像。

这工作正常，但我第一次单击它时，原始图像在其他图像显示之前消失(一瞬间)。之后就可以无缝运行了。

有什么方法可以消除这种怪癖，这样就不会出现没有图像显示的情况吗？

这是我的 Controller 代码:

    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

您可以尝试预加载新图像 with javascript , without javascript或with css .

另一个选择是使用 sprites那ensure图像已加载。

这些只是您可以尝试的一些技巧，如果您进行一些谷歌搜索，还有更多技巧:)

事实上，我建议在单个元素上使用单个 Sprite ，然后在 CSS 中使用 background-position 来切换焦点。这样，您只需从元素中添加/删除单个类，而无需添加/删除新元素并执行所有测试逻辑。