Рекурсивная команда загрузки jQuery

Question

В предыдущем посте о команде рекурсивной загрузки jQuery предложенный код работает, но имеет некоторые ограничения. Вот код, который был предложен и ссылка :

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

loadTree($('#content'));

Проблема с приведенным выше кодом заключается в том, что если загрузка не удалась, рекурсивный цикл завершается. В моем случае я загружаю изображения одно за другим и получаю URL-адреса изображений из базы данных с помощью вызова AJAX. Если по какой-то причине URL-адрес изображения неверен, рекурсия прекратится, и я не хочу, чтобы это происходило. Остальные изображения должны быть загружены независимо от того, что, потому что если у меня есть сто путей к изображениям, где все они действительны, кроме первого, то все 100 не будут отображаться.

У меня также есть другая связанная проблема. По сути, я извлекал 7 URL-адресов изображений через ajax, затем я формировал 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 и как это обрабатывается с помощью рекурсии.