递归 jQuery 加载命令

Question

在之前关于 Recursive jQuery load 命令的帖子中，建议的代码可以工作，但有一些限制。这是已经提出的代码和the link：

function loadTree($element) {
  $element.each(function(){
    this.load('url', function(){
      loadTree(this.find('.children'));
    });
  });
}

loadTree($('#content'));

上面代码的问题是，如果加载不成功，递归循环就会终止。在我的情况下，我一个接一个地加载图像，并通过 AJAX 调用从数据库中获取图像 URL。如果由于某种原因图像 URL 不正确，递归将停止，我不希望这件事发生。无论如何都必须加载其余图像，因为如果我有 100 个图像路径，除了第一个之外，所有这些路径都有效，那么所有 100 个都不会显示。

我还有另一个相关的问题。基本上我是通过 ajax 检索 7 个图像 url，然后我在一个字符串中形成 7 个 html 图像标签，然后只用该字符串调用一次加载事件：所有这些都是为了减少浏览器请求的数量。因此，我希望加载所有 7 个图像后触发加载事件回调。但是，当我尝试此操作时，每个图像的加载事件回调都会触发。关于如何在所有项目已加载（无论是否成功加载；尝试加载）时触发回调的任何想法。

谢谢

Answer 1

我无法对此进行测试，但它应该能让你走上正确的轨道来解决你的问题。

由于您正在做的事情的复杂性，您应该转向更详细的 $.ajax 函数，因为它每次都提供更多回调函数并测试失败。

   function loadTree(element) {
    var elementsQueried = 0;
    $(element).each(function(index, value){

        $.ajax({
            url: 'url',
            success: function(returnValue){
                $(value).html(returnValue); //if successful ajax assign the returned html to the element
                loadTree($(value).find('.children')); //then continue searching the child tree
            },
            error: function(request,error) {
                $(value).html('File not found'); //else give some useful error message, but dont keep searching child tree

            },
            complete: function(){
                elementsQueried++;
                if (elementsQueried==$(element).length){
                    //callback
                }
            }
        });

    });
   }

就像我说的那样，我无法对其进行测试，因此可能存在一些问题，特别是 elementsQueried var 的范围以及如何通过递归处理。