根据服务器上的图像交换带有jquery的图像 [英] swap images w/ jquery based on their existence on the server

问题描述

在过去的几天里，我一直在努力解决这个半特定的问题，我真的可以再用另一双眼睛.

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.

我的目标是在页面上显示图片.它以静态png开头，单击后将替换为.gif并播放动画.再次单击时，它将再次交换并播放第二个.gif动画.第三次执行相同的操作.单击第三个.gif时，它将再次播放第一个gif动画，然后重新开始整个过程​​.

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.

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

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.

所以我想做的是在加载下一个.gifs之前检查它是否存在.

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

上面的代码在单击图像时运行.它找到图像src，并将静态png替换为第一个动画gif.所有图像都有动画gif，所以这不是问题.

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

在加载_pt1之后，下次单击该函数时将运行该函数.它应该检查_pt2是否存在，如果存在，则将pt1替换为pt2.但是，它似乎只在第二次点击时起作用.如果我单击一次，它将再次加载_pt1，然后第二次通过它将正确加载_pt2.这是我的主要问题所在...

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.

推荐答案

这是您的问题:

   $.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调用将返回并移至调用成功(或错误)回调之前的下一行.您可以通过使用代码将数据从回调移动到回调中来解决此问题:

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

您在第二次调用时看到成功，因为您正在将下一个图像名称分配给全局变量.您应该使用var来避免这种情况.

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.

这篇关于根据服务器上的图像交换带有jquery的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！