javascript - swap images w/ jquery based on their existence on the server

Question

I've been trying to figure out this semi-specific problem for the past couple days, and I could really use another pair of eyes on it.

My goal is to have an image on the page. It starts out as a static png, and when it's clicked, it swaps out with a .gif and plays an animation. When it's click on again, it swaps again and plays a second .gif animation. It does the same thing a third time. When the 3rd .gif is clicked on, it plays the 1st gif animation again, and the process starts all over again.

My issue is that multiple images are loaded on the page, and some have 3 total gif animations, some have 2, and some have one.

So what I'm trying to do is check if the .gifs exist before I load the next one.

Here's an excerpt with some of my notation...

$('#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;
    }

That code above runs when the image is clicked. It finds the image src, and replace the static png with the first animated gif. all the images have an animated gif, so this isn't a problem.

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

After _pt1 is loaded, then this function runs the next time you click. it is supposed to check if a _pt2 exists, and if it does, then swap out the pt1 with pt2. HOWEVER, it only seems to be working on the second click. if i click it once, it loads _pt1 again, and then the second time through it will load _pt2 properly. this is where my major problem lies...

i apologize if this is convoluted but i'm really stumped here. i'll try to do my best to clear things up if you guys are way too confused.

Answer 1

Here is your issue:

   $.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);

That last line of code is trying to use your variable imgSrcToUse, which doesn't contain the result of your AJAX query yet. AJAX is asynchronous, so your $.ajax call returns and moves onto the next line before the success (or error) callbacks are called. You can resolve this by moving the code using the data from the callbacks into the callbacks:

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

You were seeing sucess on the second call because you were assigning the next image name to a global variable. You should use var to avoid this.