Как я могу проверить, существуют ли два изображения, а затем сделать что-то еще

Question

Используя Ajax, я проверяю, доступны ли два источника изображения на сервере или нет. Код Ajax следующий:

        if (result['img_one'] !== '') {
            var src_one = "blah-blah-one.jpg";
            $.ajax({url: src_one,
                success: function(data, textStatus) {
                    $("#profile-box").show();
                    $("#profile-img").attr("src", src_one);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $('#profile-box').hide();
                }
            });
        }
        if (result['img_two'] !== '') {
            var src_two = "blah-blah-two.jpg";
            $.ajax({url: src_two,
                success: function(data, textStatus) {
                    $("#profile-box").show();
                    $("#profile-pic").attr("src", src_two);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $('#profile-box').hide();
                }
            });
        }

После этих двух блоков кода я хочу проверить, доступны ли и загружены оба изображения, или нет. Однако, будучи новичком ie, я не могу этого сделать. Использование $ .when и .done мне не помогло, и проблема до сих пор сохраняется. Я перепробовал много разных способов и техник, чтобы проверить, существуют ли изображения на сервере, однако при проверке доступности обоих я столкнулся с проблемой. Другими словами, я могу проверить, существует ли каждое изображение, но когда я хочу выполнить другое действие, когда они оба доступны, я застреваю. Пожалуйста, помогите.

Даже следующие функции не помогли:

function checkImage(url){

    var image = new Image();

    image.src = url;

    if (!image.complete) {
        return false;
    }
    else if (image.height === 0) {
        return false;
    }

    return true;
}

и

function imageExists (src) {
    var result;
    $("<img>").attr('src', src).on("error", function(e) {
             result =  false;
        })
        .on("load", function(e) {
            result = true;
        });
    return result;
}

Answer 1

Это не совсем возможно, если вы используете асинхронные функции.

Один способ - с Promise с. Вот функция, которая загружает изображение (при условии URL в src) и возвращает обещание сделать это:

function loadImage( src, imgSelector ) {
  return new Promise(function(resolve, reject) {
    $(imgSelector).attr('src', src).on("error", function(e) {
      reject( "Unable to load " + src )
    })
    .on("load", function(e) {
      resolve()
    });
  })
}

Затем вы можете попросить загрузить два изображения и сообщить, когда они сделано:

Promise.all( [loadImage('first.jpg', '#profile-img'), loadImage('second.jpg', '#profile-pic') ] ).then(
  function(result) {
    console.log("Got 'em all!'")
  }
).catch(function(result) {
  console.log( "Oops, error: " + result )
})

Когда они оба загрузятся, "Got 'em all!" сообщение должно отобразиться в консоли. Если какой-либо файл не загружается, он вызовет сообщение «К сожалению, ошибка».

Answer 2

Вы, вероятно, хотите вложить вызовы ajax. Поскольку ajax вызовы являются асинхронными, браузер не будет «ждать» завершения первого вызова перед вызовом второго. Таким образом, псевдокод будет выглядеть примерно так:

ajax(
  {
    url: src1,
    success: function (result) {
       ajax(
         { 
           url: src2,
           success: function (result) {
             // At this point both images are loaded
             box.show();
           }
         }
       )
     }
   }
)

Более "современный" подход заключается в использовании Promises или async / await, но это, вероятно, даст вам то, что вам нужно, используя jQuery.