Как подключить к img уже загруженное изображение?

Question

[Никита Егоров]

Всем привет.

Подгружаю асинхронно после определенного события картинку. После чего добавляю ее так:

const el  = document.getElementById('id')
el.src = 'папка/файл.jpg'

Проблема в том, что сначала ajax грузит изображение, все ок, но когда я добавлю src к изображению, то картинка заново загружается. В принципе понятно почему. Но не понятно как можно это исправить. Как сказать браузеру, что я уже загрузил изображение?

Comments

[Lynn «Кофеман»]

Для начала проверить, что сервер отдаёт заголовки кеширования

Хотя зачем вообще загружать картинку аяксом?

[Никита Егоров]

Алексей Тен, Прогресс загрузки изображения можно увидеть только через ajax

[Lynn «Кофеман»]

svupol, я уже понял. Сначала не прочитал комментарии к ответам.

Answer 1

[Владимир Проскурин]

Не очень понятен момент. Вы загружаете картинку от пользователя на сервер, и от туда ее показываете? В таком случае, технически это разные картинки (с сервера и у пользователя). Вы можете попробовать получить картинку из input file вот так https://codepen.io/mobifreaks/pen/LIbca

Comments

[Никита Егоров]

Наоборот. С сервера через ajax к пользователю. Проблема с отображением. Надо что бы именно можно было к атрибуту img - src, добавить путь,

что бы браузер понял, что надо искать уже в закаченных файлах, а не на сервере

[Владимир Проскурин]

svupol, если браузер обращается по той ссылке, к которой он уже обращался (и он ее уже закешировал), т.е. показывал уже эту картинку, то он будет брать с кеша. Но только в том случае, если ссылка точно такая же. Вот пример
https://jsfiddle.net/g2uhmv4p/3/
Покликайте с включенным кешем по кнопкам загрузить потом удалить. Картинка моментально грузится со второго раза (а это к слову 4к картинка и это ваш код). Если кеш выключить (возможно у вас в инструментах разработчика стоит галка "выключить кеш при открытом девтулз"), то она грузится заново.

[Никита Егоров]

Владимир Проскурин, да все правильно. Но.

Пользователь наводит на картинку, происходит ajax запрос к этой картинке. Все картинка загружена, но не отображена. Для отображение, я беру элемент img, и в его атрибут src, ставлю url той же картинки. Но картинка загрузится повторно. Как можно обойти повторную загрузку?

[Никита Егоров]

Владимир Проскурин, https://jsfiddle.net/g2uhmv4p/11/

[Владимир Проскурин]

svupol, странное решение проблемы. Можно через канву попробовать поместить бинарник картинки, но это будет не практично. Почему не рассматриваете вариант безе ajax? https://jsfiddle.net/g2uhmv4p/14/ Или вы по ajax загружаете ссылку на картинку? Тогда браузер не скачивает эту картинку, это просто ссылка, которую еще нужно отдельно загрузить.

[Никита Егоров]

Владимир Проскурин,

Я загружаю изображения с помощью ajax, что бы пользоваться событием xhr.onprogress. То есть если буду получать url, толку ноль.

То есть пользователю нужно видеть именно прогресс загрузки его изображения с сервера. Поэтому только так. Все же спасибо за помощь

[Владимир Проскурин]

svupol, картинка должна быть на том же сервере (ну или с открытым cross origin)

<h1>4k картинка
</h1>
<span id="perc"></span>
<button id="button">Загрузить</button>

<img src="" alt="" id="image">
<script>
function updatePercentage(perc) {
	document.getElementById('perc').innerHTML = perc + '%';
	console.warn(perc);
}
button.onclick = () => {
  const el  = document.getElementById('image')
  const srcImg = 'Sample-jpg-image-30mb.jpg';
  let completePercentage = 0;
  var xmlHTTP = new XMLHttpRequest();
  xmlHTTP.open('GET', srcImg,true);
  xmlHTTP.responseType = 'arraybuffer';
  xmlHTTP.onload = function(e) {
      var blob = new Blob([this.response]);
      el.src = window.URL.createObjectURL(blob);
  };
  xmlHTTP.onprogress = function(e) {
      completePercentage = parseInt((e.loaded / e.total) * 100);
      updatePercentage(completePercentage);
  };
  xmlHTTP.onloadstart = function() {
      completePercentage = 0;
      updatePercentage(completePercentage);
  };
  xmlHTTP.send();
 
};
</script>

[Никита Егоров]

Владимир Проскурин, ого, то что нужно, спасибо большое!

Answer 2

[RidgeA]

Можно вставлять с помощью base64 https://stackoverflow.com/a/8499716/6237232
Не совсем ответ, но может лучше по ajax получать url картинки, и создавать уже элемент с этим адресом ?

Comments

[Никита Егоров]

Я загружаю изображения с помощью ajax, что бы пользоваться событием xhr.onprogress. То есть если буду получать url, толку ноль.

Насчет base64. То есть вы предлагаете отправлять по ajax строку с данным для base64, потом ее подключать?
А есть все же решение без base64. Просто указать путь, что бы браузер понял, что надо искать уже в закаченных файлах, а не на сервере?

[Bhudh]

Просто указать путь, что бы браузер понял, что надо искать уже в закаченных файлах

Невозможно. "Уже закачанные" (закаченные — это от слова закатить) файлы лежат в кэше или в памяти, что для JS одинаково равнозначно "у чёрта на куличках", так как прямого доступа ни туда, ни туда у JS нет.

[Никита Егоров]

Bhudh, хмм, спасибо