1

我正在尝试使用 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;
}
4

3 回答 3

2

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

您必须改为在 success() 中调用其他代码——例如：

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

function codeThatNeedsImg(img){
   console.log(img);
}
于 2012-07-11T21:59:04.727 回答
0

好吧，我终于找到了解决问题的方法。@bokonic 对 ajax 的看法非常正确。我一直使用 ajax，所以我可以使用成功调用，而不是在等待错误调用更改“成功”变量并结束循环时附加图像。它会在等待时附加大约 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;
    });
}
于 2012-07-12T17:40:11.663 回答
0

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

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

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

这是一个带有逻辑的示例小提琴：http: //jsfiddle.net/jZpNj/

于 2012-07-11T22:09:24.093 回答