Присвоить массив элементов изображения идентификаторам DOM

Question

У меня есть массив URI, которые представляют элементы .png, например, "./img/diamond-red-solid-1.png".

Я хочу назначить каждому элементу массива "gameDeck [0], gameDeck [1] и т. Д. Идентификаторы деления в HTML. Нужно ли идентифицировать элементы как = SRC.IMG?

var gameDeck[];
var gameBoardCards = function () {
    for (let cardArr of cardsToLoad)
    gameDeck.push("./img/" + cardArr + ".png");
}

gameBoardCards();

document.addEventListener('DOM Content Loaded', function () {
  gameDeck[0] = document.getElementById("card1");
  gameDeck[1] = document.getElementById("card2");
  etc.      
});        

Answer 1

Вот способ, которым вы можете вставлять изображения как фоновые изображения или как <img /> элементы в divs, на который вы ссылаетесь:

<div id="card0" style="width: 100px; height: 100px;"></div>
<div id="card1" style="width: 100px; height: 100px;"></div>

let loadedImage = [];

function preloadImages(urls, allImagesLoadedCallback) {
  let loadedCounter = 0;
  let toBeLoadedNumber = urls.length;
  urls.forEach(function(url) {
    preloadImage(url, function() {
      loadedCounter++;
      console.log(`Number of loaded images: ${loadedCounter}`);
        if (loadedCounter == toBeLoadedNumber) {
          allImagesLoadedCallback();
        }
      });
    });

  function preloadImage(url, anImageLoadedCallback) {
    img = new Image();
    img.src = url;
    img.onload = anImageLoadedCallback;
    loadedImage.push(img);
  }
}

function gameBoardCards() {
  for (let i = 0; i < loadedImage.length; i++) {
    document.getElementById(`card${i}`).style.backgroundImage = `url('${loadedImage[i].src}')`;
    // document.getElementById(`card${i}`).appendChild(loadedImage[i]);
  }
}

preloadImages([
`https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Color_icon_green.svg/2000px-Color_icon_green.svg.png`,   `https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png`
], function() {
    console.log(`all images were loaded`);
    gameBoardCards();
    // continue your code
});

Это может выглядеть какнемного за то, что вы пытаетесь достичь, но я добавил туда корректный обработчик загрузки изображений.Функция preloadImages будет обрабатывать загрузку изображений, таким образом, они должным образом предварительно загружены, и может отображаться в DOM.Часто мы пытаемся использовать изображения до их правильной загрузки, в результате чего они иногда не отображаются, несмотря на отсутствие ошибок.

Остальная часть кода является прямой, в цикле forон проходит по существующему divs, и вы можете использовать текущую активную строку document.getElementById(`card${i}`).style.backgroundImage = `url('${loadedImage[i].src}')`;, чтобы использовать loadedImage[i] изображение src, чтобы загрузить его в качестве фонового изображения divs.Или вы можете использовать закомментированную строку непосредственно под этим document.getElementById(`card${i}`).appendChild(loadedImage[i]);, чтобы вставить элемент <img /> в этот div.Просто используйте любой из них, который вам подходит.

Вы можете увидеть код в действии в этой демонстрации JS Fiddle .

Надеюсь, это поможет:)

Answer 2

Насколько я понимаю, ваш вопрос заключается в том, что вы хотите настроить таргетинг на div в вашем HTML с помощью идентификаторов card1, card2, card3 ... card12 и т. Д.

Вы хотели бы вставитьтег img в каждом из этих элементов div, где src - это URI массива gameDeck.

Следующий код достигает этого.Я проверил это, и он отлично работает.Надеюсь, это поможет :)

 document.addEventListener('DOMContentLoaded', function () {
  //iterate through the gameDeck array.
  for (let x = 0;x < gameDeck.length;x++){
    //create an img tag for each gameDeck element
    var imgElement = document.createElement("img"); 
    //set the source of the img tag to be the current gameDeck element (which will be a URI of a png file)
    imgElement.src = gameDeck[x];

    //target the div with id "card(x + 1)" 
    var cardID = "card" + (x + 1);
    var cardElement = document.getElementById(cardID);

    //append the img tag to the card element
    cardElement.appendChild(imgElement);   
  } 
  //log the HTML to the console to check it
  console.log(document.getElementById('body').innerHTML);
});