Question

我正在尝试使用ajax，以便在尝试加载之前检查图像是否存在。我有它主要工作，但我在错误中设置一个变量：和成功：ajax中的标签，并没有改变我的img变量。有没有办法通过这些标签影响函数的其余部分？

function getImage(imageNum)
{
var img;
$.ajax({
    url:imageLocation + imageNum + '.png',
    type:'HEAD',
    error: function()
    {
        img = 0;
    },
    success: function()
    {
        var img = $('<img />', {
            src: imageLocation + imageNum + '.png',
            class: 'image',
            id:'image' + imageNum});
        return img;
    }
});
console.log(img);
return img;
}

好吧所以如果没有理由使用AJAX，我宁愿只使用图片标签。问题是变量在我的函数中没有改变。这是一个例子。

function getImage(imageNum)
{
    var img;
    var success = 10;
    var img = $('<img />', {
        src: imageLocation + imageNum + '.png',
        class: 'image',
        id:'image' + imageNum,
        success: function () { 
            success = 1
        },
        error: function () { 
            success = 0;
        }
    });

    console.log(success);
    if(success = 1)
        return img;
    else
        return 0;
}

function loadImage(imageNum)
{
    var img = getImage(imageNum);
    if(img != 0)
    {
        $('#slider').imagesLoaded( function () {
            $("#slider").append(img);
            loadImage(imageNum + 1);
        });
    }
    else
        return;
}

Answer 1

$ .ajax是异步的，所以你在调用完成之前调用console.log。当您的代码是同步代码时，您不能像这样返回。

您必须在成功（）中调用其他代码 - 例如：

$.ajax({
  url: '',
  data: '',
  success: function(data){
      codeThatNeedsImg(data);
  }
  });

function codeThatNeedsImg(img){
   console.log(img);
}

Answer 2

如果您想要做的只是在图像本身加载之前不附加<img>元素，那就这样做吧！创建<img src="..." />元素，但不要将其附加到DOM。它将提示浏览器尝试获取图像文件。您可以将成功和错误事件侦听器附加到元素本身，这些元素将触发各自的结果。

如果您获得了成功事件，那么您知道图像存在，并且您知道它已经预先加载，因此您现在可以将其附加到DOM！如果它不存在，则调用将更快返回，并且错误事件将在没有更多开销的情况下触发。我说这是双赢的。

您可以通过阅读事件回调函数中元素的src属性来检查它是哪个图像。

这是一个逻辑示例：http://jsfiddle.net/jZpNj/

Answer 3

好吧，所以我终于找到了解决问题的方法。 @bokonic非常关注ajax。我一直使用ajax，所以我可以使用成功调用，而不是在等待错误调用时附加图像来更改'success'变量并结束循环。它会在等待时附加3张额外的图像。成功永远不会从加载图像调用，所以我猜它只是一个ajax。这就是它的样子。

function loadImage(imageNum)
{
    $('#slider').imagesLoaded( function () {
        if(success)
        {
            $.ajax({
                url:imageLocation + imageNum + '.png',
                type:'HEAD',
                error: function()
                {
                    success = false;
                },
                success: function()
                {
                    var img = $('<img />', {
                        src: imageLocation + imageNum + '.png',
                        class: 'image',
                        id:'image' + imageNum
                    });
                    $('#slider').append(img);
                    loadImage(imageNum + 1);
                }
            });
        }
        else
            return;
    });
}

jQuery ajax成功不改变局部变量

3 个答案: