Пауза для динамического изображения для загрузки / отображения с помощью AJAX?

Question

Я создаю карусель изображений, которая проверяет каталог для новых загруженных изображений (на основе последовательных имен файлов) и добавляет их в карусель.

var refreshId = setInterval(function() {
$.ajax({

// Checks to see if file exists
url : imageUrl,
success : function (xhr, d, e) {

// Adds image found at imageUrl to the carousel
$("#makeMeScrollable").smoothDivScroll("addContent", imageData);

// Increments imageUrl from /images/image01.jpg to images/image02.jpg etc
imageListener();
},

error : function (xhr, d, e) {
if (xhr.status == 404) {
}
}
});
}, 5000);

Все это прекрасно работает для уже загруженных изображений, но то, что происходит, я думаю, что, когда я загружаю новое изображение, оно возвращает успех при наличии изображения и пытается добавить его в карусель до того, как оно завершит загрузку, и я получаю изображения, которые не отображаются должным образом /появляются в автономном режиме.Я полагаю, что мне нужен какой-то способ остановить вещи, пока загрузка и добавление в карусель не будут завершены.Это, наверное, очень просто, но я новичок и много чего перепробовал, но безуспешно.Любая помощь с благодарностью!Спасибо!

Answer 1

загрузить изображения во временную папку, затем, когда загрузка будет завершена, переместить ее в фактическую папку

Answer 2

Вместо того, чтобы использовать XHR для определения того, что файл существует, почему бы просто не создать новое изображение и установить его src для URL-адреса и подождать, пока не появится сообщение о загрузке или об ошибке?