В настоящее время я изучаю JavaScript в учебном лагере, и мне сложно понять, как решить проблему. Я много гуглил, но мне кажется, что мне не хватает основной функциональности в том, что я пытаюсь сделать.
Я получаю массив возвращенных изображений из API на основе даты указывается селектором даты. Я хочу измерить размеры естественной высоты и ширины каждого элемента в массиве и отфильтровать их в другой массив, который я буду использовать для отображения галереи. Вот ссылка на то, что возвращает API:
Пример массива возвращаемых объектов API [0]
Вот соответствующий фрагмент кода, включая вызов API.
spaceApp.getRoverPhotos = (date) => {
$.ajax({
url: spaceApp.roverUrl,
method: 'GET',
data: {
api_key: spaceApp.key,
earth_date: date,
camera: spaceApp.cameras,
page: 1,
}
}).then((res) => {
//functioning code but doesn't wait for stuff to load.
let displayArray = res.photos.filter( (each) => {
let imageDim = new Image();
imageDim.src = each.img_src;
if(imageDim.naturalWidth >= 1000 && imageDim.naturalHeight >= 1000) {
return true;
}
else {
return false;
}
});
console.log(displayArray);
})
}
Результаты не согласуются, и я думаю, что это способ загрузки изображений. Метод фильтрации используется после успешного обещания, поэтому я знаю, что массив последовательно возвращает нужную мне информацию, но я не всегда получаю естественную высоту и ширину из-за того, как что-то загружается. Я использовал forEach, чтобы записать в консоль естественную высоту и ширину, когда я отправляю дату дважды подряд. Первый не возвращает мне значений, второй загружает их все:
Первая отправка, 25 результатов из 0 0, затем все отображаются при повторной отправке формы
Думаю, это как-то связано с кешированием изображений. Я пробовал использовать image.onload
творчески, но не уверен, что это имеет смысл, учитывая, что я нигде не использовал их на странице (аналогично я пробовал imageDim.addEventHandler('load', ()=>{}))
. Я пробовал использовать карту для создать новый массив изображений, используя описанный выше подход new Image (), а затем отфильтровать новый массив, но я столкнулся с той же проблемой. Я подумал об использовании обещания, но не могу понять, как «загружать» изображения не отображая их на странице и используя это как обещание внутри фильтра.
Я видел и безуспешно пробовал несколько вариантов этого:
var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";
Я извините, если я пропустил шаг здесь, но я работал над этим в течение нескольких часов безуспешно. Я попросил помощи у своего единственного старшего друга-разработчика, но он не смог дать мне много рекомендаций, так как это произошло чтобы не быть дома в это время (он предложил мне «загрузить» изображения в новый массив, а затем отфильтровать, но у меня такая же проблема с загрузкой изображения - я попробовал его предложение). 1026 * Если кто мог бы уделить время, чтобы помочь мне, я был бы очень признателен! Я чувствую, что нахожусь на препятствии, потому что я не совсем понимаю природу истинной проблемы, с которой я сталкиваюсь. Если кто-то может сказать мне, что мне не хватает, я могу продолжить поиск в Google! Заранее спасибо!