Javascript 根据图像在服务器上的存在与jquery交换图像

在过去的几天里，我一直在试图解决这个半特定的问题，我真的可以用另一双眼睛来观察它

我的目标是在页面上有一个图像。它一开始是一个静态的png，当点击它时，它会换成一个.gif并播放一个动画。当再次单击时，它会再次交换并播放第二个.gif动画。它第三次做同样的事情。当点击第三个.gif时，它会再次播放第一个gif动画，整个过程会重新开始

我的问题是页面上加载了多个图像，有些图像总共有3个gif动画，有些图像有2个，有些图像有一个

所以我要做的是在加载下一个文件之前检查.gif是否存在

这是我的一些符号的摘录

$('#postContainer img').click(function () {            
    imgSrc = $(this).attr('src');    
    if(imgSrc.indexOf('_B.png') != -1){
        imgSrcToUse = imgSrc.replace('_B.png', '_pt1.gif');
        $(this).attr('src', imgSrcToUse);
        return false;
    }

上面的代码在单击图像时运行。它查找图像src，并用第一个动画gif替换静态png。所有图像都有动画gif，因此这不是问题

if (imgSrc.indexOf('_pt1.gif') != -1) {
    var POS2 = imgSrc.replace('_pt1.gif', '_pt2.gif');
    $.ajax({
        url: POS2,
        type: 'HEAD',
        error: function() {
            alert('error');
            imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt1.gif');
        },
        success: function() {
            alert('success');
            imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt2.gif');
        }
    });        

    $(this).attr('src', imgSrcToUse);
    return false;
}

加载

\u pt1

后，下次单击时将运行此函数。它应该检查pt2是否存在，如果存在，则用pt2替换pt1。然而，它似乎只在第二次点击时起作用。如果单击一次，它将再次加载

\u pt1

，然后第二次通过它将正确加载

\u pt2

。这就是我的主要问题所在

我很抱歉，如果这是复杂的，但我真的在这里被难住了。如果你们太困惑了，我会尽力把事情弄清楚。

这是你们的问题：

   $.ajax({
        url:POS2,
        type:'HEAD',
        error: function()
        {
            alert('error');
            imgSrcToUse = imgSrc.replace('_pt1.gif','_pt1.gif');
        },
        success: function()
        {
            alert('success');
            imgSrcToUse = imgSrc.replace('_pt1.gif','_pt2.gif');
        }
    });     

    $(this).attr('src',imgSrcToUse);

最后一行代码试图使用变量

imgSrcToUse

，该变量尚未包含AJAX查询的结果

AJAX

是异步的，因此在调用成功（或错误）回调之前，

$.AJAX

调用返回并移动到下一行。您可以通过使用回调中的数据将代码移动到回调中来解决此问题：

var $that = $(this);
$.ajax({
    url: POS2,
    type: 'HEAD',
    error: function () {
        alert('error');
        var imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt1.gif');

        $that.attr('src', imgSrcToUse);
    },
    success: function () {
        alert('success');
        var imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt2.gif');

        $that.attr('src', imgSrcToUse);
    }
});

---

您在第二次调用中看到了成功，因为您正在将下一个图像名称分配给一个全局变量。您应该使用

var

来避免这种情况。

当页面加载时，您知道每个

可以有多少不同的GIF吗？不，一开始不知道。因此，我要检查每次单击图像时是否存在以下gif。（单击pt1->检查pt2是否存在->加载pt2否则加载pt1，等等）在单击之前进行检查可能更有意义，如果每次单击时都检查图像是否存在，则会降低图像更改的速度，因为我已将所有图像预加载到隐藏容器中，因此更改非常快。出于某种原因，虽然图像需要两次单击才能更改，而不是一次。嗯，如果您将所有图像预加载到某个位置，这会使更改变得更容易。您可以使用选择器查看图像是否存在于隐藏容器中，例如

if（$（'.hidden img[src=“'+url+'））.length>0）

然后使用下一个图像，否则返回第一个图像