加载图像后,AJAX调用,一次一个

时间:2014-01-07 20:55:43

标签: javascript php jquery ajax image

尽管有许多类似的问题,但我还没有找到解决这一特定问题的方法。我有许多文件夹,每个文件夹包含许多图像文件。我想对这些文件进行批量检测,并将面部坐标和其他相关数据发送到数据库,我打算使用这个jQuery插件:http://facedetection.jaysalvat.com/。它一次只能处理一个图像,并通过以下基本调用返回所有必要的数据:

var coords = $('img').faceDetection({
    complete:function(img,coords) {
      // Do stuff ...
    }
});

我想要做的是从所有图像列表开始,一次发送一个图像到该函数,对一个将相关数据放入数据库的PHP文件进行AJAX调用,以及在AJAX业务之后已完成将下一个图像发送到面部检测插件...直到所有图像都已处理完毕。

到目前为止,我提出的最好成绩如下:

var tot = imgs.length;
facedetect(0);
function facedetect(imgn) {
    $('img').attr('src',imgs[imgn].path);
    $('img[src="' + imgs[imgn].path + '"]').load(function() {
        var coords = $('img').faceDetection({
            complete:function(img,coords) {
                // Create var json ...
                $.ajax({
                    type: "POST",
                    url: "test.php",
                    data: { data : json },
                    success: function() {
                        imgn++;
                        if(tot > imgn) {
                            facedetect(imgn);
                            return;
                        }
                    }, dataType: "json"
                });
            }
        });
    });
}

但是,如果我使用三个图像的简单列表运行(imgs [0] -imgs [2]),我会为第一个图像调用一个AJAX,第二个调用两个,第三个调用四个而不是一个每。显然有些事情是非常错误的,但我无法弄清楚是什么,所以任何帮助都会受到赞赏。

编辑:我首先尝试了for循环和$()。each(),但由于他们不等待加载每个图像,我试着去递归。为此我打算做 - 一次加载一张图像。 imgs.length基于PHP数组,文档中只有一个img标记。但是,您的回复让我意识到我甚至可以在开始循环之前确保所有图像都已加载。我甚至没有考虑到这一点,可能是因为我有几千张图片,但我当然可以一次做几个文件夹。谢谢,这就是我接下来会尝试的。 :) (但仅仅是为了它,在一个时间场景中找到负载一个图像的工作解决方案会很有趣。)

1 个答案:

答案 0 :(得分:0)

不是递归发送ajax查询,而是尝试在for循环中发送它们:

修改: 如果你这样做,你可能想要进行查询async = false,这样图像src就不会改变,下一个查询在完成之前不会触发。

var tot = imgs.length;
for(var imgn=0; imgn<tot; imgn++)
{
  $('img').attr('src',imgs[imgn].path);
  $('img[src="' + imgs[imgn].path + '"]').load(function() {

     var coords = $('img').faceDetection({

        complete:function(img,coords) {

           $.ajax({
               dataType: "json",
               type: "POST",
               url: "test.php",
               data: { data : json },
               async: false,
               success: function(data) {console.log(data);},
               error: function(e){console.log(e.responseText);}
            });
        }
    });
}