Удалить фоновый URL, но только после того, как изображение полностью загружено

Question

Я загружаю изображение со стороны клиента, используя createObjectURL. Иногда изображение большое, поэтому я хотел добавить туда "загрузочный" анимированный GIF.

У меня есть контейнер div (fileDisplay) и img (imgDisplay).

У fileDisplay фон установлен на анимированный GIF. Итак, поскольку imgDisplay загружает большой файл, вы видите загрузочный GIF. Когда загрузка imgDisplay завершена, она покрывает gif. Так что все еще там, но вы не видите. Я подумал, что должно быть хорошо. Все хорошо - пока img - квадрат, который искажает пропорции img.

Но если размер изображения, загруженного в imgDisplay, изменяется с правильными пропорциями, а не с квадратом (размеры fileDisplay 45x45 пикселей), вы все равно видите изображение в фоновом режиме.

Так что мне нужно, чтобы иметь возможность отключить анимированный GIF (background url=none в fileDisplay), или покрыть его другим div или чем-то еще. Но только когда изображение полностью загружено.

Теперь я могу, попробовав все, что могу придумать, увидеть, что нет способа изменить фон, включить / выключить div и т. Д. И сделать это. Кажется, что все обрабатывается, а затем все конечные результаты отображаются сразу, а не постепенно, как если бы это было, скажем, приложение VB.

Может кто-нибудь помочь мне решить, как это сделать - я предполагаю, что это может быть сделано. И я думаю, что решение "обещание". Я искал образцы, прочитал то, что я могу найти, но просто не могу понять это.

Событие uploadButton on change запускает этот код:

imgSrc = window.URL.createObjectURL(this.files[0]);
//document.getElementById("imgDisplay" + justNumber).src = imgSrc;
getImgSize(imgSrc, useImgSize);

Где закомментированная строка просто отображает изображение в формате 45x45. Но функция getImgSize вычисляет размер и отображает изображение с измененным размером - вот когда возникает проблема. Просто попробуйте загрузить изображение, которое не квадратное, и вы увидите проблему.

Полная скрипка здесь: https://jsfiddle.net/msith718/xfuv79b3/334/

Answer 1

Вот один из способов решения этой проблемы: https://jsfiddle.net/xfuv79b3/353/. Поскольку вы хотите что-то изменить после загрузки изображения, нам нужно добавить код куда-нибудь после вызова события onload. Я решил передать id моему imgLoader, который передается в обратный вызов, который обрабатывает изображение после загрузки. Затем, наконец, используйте этот идентификатор, чтобы изменить фон div, как только элемент img загрузит новое изображение. Что ты нэ

getImgSize(imgSrc, useImgSize, justNumber);
//...
img.onload = function() {
  fn({
    width: img.width,
    height: img.height
  },id);
}
//...
document.getElementById("imgDisplay" + id).onload=function(){
  document.getElementById('fileDisplay'+ id).style.background='none';
}
//Also to reset the background if upload is canceled
document.getElementById("fileDisplay" + justNumber).style.background = '';

Дополнительное примечание

Из вашей ссылки на vb и нарисованное, я предполагаю, что ваш фон больше ориентирован на основной цикл, который обрабатывает все взаимодействия и содержит все данные или состояние вашего приложения. Javascript очень отличается от этого тем, что взаимодействие с пользователем происходит через события, которые являются асинхронными. Это означает, что данные должны быть явно переданы при необходимости внутри определенного обратного вызова.

Думайте об этом так. Ваша программа запускается в состоянии покоя, но прослушивает события, которые сигнализируют о некоторых изменениях. Если происходит событие (например, пользователь нажимает кнопку), ваша программа вызывает обработчик события. Это происходит асинхронно, что означает две вещи. Единственные доступные ему данные - это данные, передаваемые в обработчик, и данные, доступные из его родительской области. И два это означает, что любые последующие действия или обработка данных должны вызываться из этого обработчика событий. Таким образом, каждый обработчик событий должен выполнить все необходимые действия и любые изменения состояния обновлять программу, прежде чем вернуться в состояние покоя. Затем ваша программа ждет следующего события.

Это очень упрощено (например, несколько событий могут быть запущены одновременно) и, надеюсь, полезно, но как только вы освоите его, javascript станет намного более понятным. Я бы посоветовал ознакомиться с программированием, управляемым событиями, с использованием javascript, так как я уверен, что есть намного лучшие учебники и объяснения, но, надеюсь, это направит вас в правильном направлении.

Answer 2

Таким образом, чтобы сделать это, вы хотите удалить элемент gif/img из родительского div, когда вы загружаете новое изображение в div. Что вы бы сделали с функцией element.removeChild().

//Put this code as soon as you want to remove the loading gif

//This gets the node or the element you want to remove
var node = document.getElementById("gif");
//This removes the node from the parent div
document.getElementById("parentDiv").removeChild(node);