Вопрос:

PreloadJS загрузил изображение, но я не могу вставить его в DOM

javascript html createjs preloadjs

26 просмотра

2 ответа

3 Репутация автора

Я пытаюсь предварительно загрузить одно изображение с помощью PreloadJS , а затем вставить его в DOM дважды. Но я могу вставить только одно изображение.

var queue = new createjs.LoadQueue();
queue.addEventListener('complete', onComplete);
queue.loadManifest([{
  id: 'img',
  type: 'image',
  src: 'https://i.imgur.com/adSrF00g.png',
}, ]);
queue.load();

function onComplete(event) {
  var img = queue.getResult('img');
  var imgSrc = img.src;

  // this code inserts image to the DOM but 404 not found error appears in console
  document.getElementById('game').innerHTML = `<img src="${imgSrc}" />`;

  // this code do the same thing and 404 also appears
  var DOM_img = document.createElement("img");
  DOM_img.src = imgSrc;
  document.getElementById('game').appendChild(DOM_img);

  // this code insert the image to the DOM succesfully
  document.getElementById('game').appendChild(img);

  // but the last line does nothing - the img tag does not appear in the DOM and nothing error in the console
  document.getElementById('game').appendChild(img);
}
<script src="https://code.createjs.com/1.0.0/preloadjs.min.js"></script>
<div id="game"></div>

Снимок экрана: https://i.imgur.com/VQwAABM.jpg

Я не могу понять, почему появляется только одно изображение. Что я делаю не так? И как я могу вставить изображение дважды? Спасибо!

Автор: Blackster Источник Размещён: 11.06.2019 11:47

Ответы (2)


1 плюс

2455 Репутация автора

Решение

Это легко исправить, но сначала я хочу кое-что вам объяснить.

Что такое URL -адреса BLOB- объектов или URL-адреса объектов ? Blob URL / Object URL - это псевдопротокол, позволяющий использовать объекты Blob и File в качестве источника URL для таких вещей, как изображения, ссылки для загрузки для двоичных данных и так далее.

В вашем случае, если вы попытаетесь открыть этот src="blob:https://yada.yada"URL-адрес BLOB-объекта, который является источником загруженного изображения, он выдаст вам ошибку, и его не удастся открыть.

Да, я знаю это Teo, но почему, если это работает с тегом src, как это возможно?

Ну, URL-адреса BLOB-объектов могут создаваться только внутри браузера. Таким образом, эти элементы имеют специальную ссылку на объект Blob или File. Эти URL-адреса могут использоваться только локально в одном экземпляре браузера и в одном сеансе (т. Е. При жизни страницы / документа).

Так что в этом случае src="blob:https://yada.yada"ссылка связана с imgтегом, созданным LoadQueueобъектом.

Тогда как я могу использовать одно и то же изображение в нескольких элементах?

Ну, у вас есть loadManifest()вы можете определить новый imgс разными идентификаторами, как в этом примере:

var queue = new createjs.LoadQueue();
queue.addEventListener('fileload', onFileLoad);
queue.loadManifest([{
  id: 'sprite1',
  type: 'image',
  src: 'https://i.imgur.com/adSrF00g.png',
}, {
  id: 'sprite2',
  type: 'image',
  src: 'https://i.imgur.com/adSrF00g.png',
}, {
  id: 'sprite3',
  type: 'image',
  src: 'https://i.imgur.com/adSrF00g.png',
}, ]);

function onFileLoad(event) {
  var img = event.result;

  // this code insert the image to the DOM succesfully
  document.getElementById('game').appendChild(img);
}
<script src="https://code.createjs.com/1.0.0/preloadjs.min.js"></script>
<div id="game"></div>

Автор: Teocci Размещён: 12.06.2019 02:05

0 плюса

3 Репутация автора

Просто нашел другое решение, которое загружает изображение один раз, а затем вставляет его в dom дважды.

var queue = new createjs.LoadQueue();
queue.addEventListener('complete', onComplete);
queue.loadManifest([{
  id: 'img',
  type: 'image',
  src: 'https://i.imgur.com/adSrF00g.png',
}, ]);
queue.load();

function onComplete(event) {
    // get loading results as blob (second argument is true)
    var blob = queue.getResult('img', true);
    
    // create two blob urls from one blob image
    var blobUrl = URL.createObjectURL(blob);
    var blobUrl2 = URL.createObjectURL(blob);
    
    // create new IMG tag and set src as first blob url
    var DOM_img = document.createElement("img");
    DOM_img.src = blobUrl;
    document.getElementById('game').appendChild(DOM_img);

    // create new IMG tag and set src as fsecond blob url
    var DOM_img2 = document.createElement("img");
    DOM_img2.src = blobUrl2;
    document.getElementById('game').appendChild(DOM_img2);
}
<script src="https://code.createjs.com/1.0.0/preloadjs.min.js"></script>
<div id="game"></div>

Автор: Blackster Размещён: 12.06.2019 09:40
Вопросы из категории :
32x32