Несколько запросов AJAX не вызывают onSuccess до тех пор, пока не будут выполнены все запросы

Question

Итак, я работаю над небольшой фотогалереей, которая загрузит набор изображений с помощью AJAX. В основном он загрузит изображение «fill.gif», сделав запрос AJAX для создания миниатюрного изображения. Страница PHP генерирует миниатюру и отправляет подтверждение, что изображение было сгенерировано, и путь к нему. Мой onSuccess должен затем заменить load.gif фактическим миниатюром.

Проблема: все это работает отлично, за исключением того, что он не начнет вводить миниатюры до тех пор, пока ВСЕ НЕ завершены незавершенные запросы. Поэтому вместо того, чтобы изображения отображались на расстоянии 1 или 2 секунды, на странице с 20 эскизами для генерации я жду 20 секунд, а затем, когда запросы AJAX идут, затем начинает отображать миниатюры, хотя некоторые из них были готовы на некоторое время.

Вот мой соответствующий код:

function getImageList() { 
//Get an XML list of all the images to be displayed. 
$.ajax({ 
url:"gallery.php", 
type: "POST", 
data:{mode: "getImageList"}, 
success: function(responseText){ 
    $(responseText).find('galImg').each(function(){ 

    //create the image divs and images, set properties and get values. 
    var imageBox = document.createElement('div'); 
    var imageElement = document.createElement('img'); 
    imageBox.setAttribute('class','imageBox'); 
    imgThumbPath = $(this).find('img_thumb').text(); 
    imgThumbReady = $(this).find('img_thumb_ready').text(); 
    imgPath = $(this).find('img_path').text(); 
    imageElement.setAttribute('id',imgPath); 
    imageBox.appendChild(imageElement); 
    $('#galleryContainer').append(imageBox); 

    //now load the src of the image 
    if (imgThumbReady=='no') { 
    imageElement.setAttribute('src',loadingImage); 
    $.ajax({ 
    url: "gallery.php", 
    type: "POST", 
    data: {mode: "generateThumbnail",imgPath:imgPath}, 
    success: function(response){ 
     if ($(response).find('message').text() == 'Sucess') { 
     imageElement.setAttribute('src',$(response).find('galImg').find('img_thumb').text()); 
     } else { 
     alert('Problem Loading Image - '+$(response).find('message').text()); 
     } 
     }, 
    datatype: "html" 
    }); 
    } else { 
    imageElement.setAttribute('src',imgThumbPath); 
    } 
    }); 
}, 
datatype:"html" 
}); 

} 

Answer 1

Как я понимаю ваш код, вы делаете AJAX запрос на генерацию всех вас эскизов сразу. То, что вы хотите сделать, - это, вероятно, сделать какой-то цикл, чтобы сделать вызов AJAX для генерации изображений один за другим. И чтобы избежать проблемы с ограниченным подключением, вы должны использовать функцию обратного вызова вашего запроса ajax для инициирования следующего запроса.

Так что ваш код логики будет больше, как это:

function loadImage(imagePath){ 
    $.ajax({ 
    url: "gallery.php", 
    type: "POST", 
    data: {mode: "generateThumbnail",imgPath:imgPath}, 
    success: function(response){ 
     // Your code to display this new thumnail goes here 
     imagePath(nextImage); 
    } 
}; 

Этот код тестировался и неполно, но я думаю, что это должно быть достаточно, чтобы направить вас в правильном направлении. Я думаю, что это самый простой/безопасный способ получить эффект, который вы хотите. Дайте мне знать, если это поможет!