分配的图像元素，以DOM ID的数组

Question

我具有表示.PNG元件的URI，例如阵列，“./img/diamond-red-solid-1.png”。

我想将数组“gameDeck [0]，gameDeck [1]等，以Div编号在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

我理解你的问题的方法是，你想用卡1，卡2，card3 ... card12等的IDS目标在HTML的div

你想插入img标签到每个这些div与src作为gameDeck阵列的URI的。

下面的代码实现了这一点。我测试过它，它工作正常。希望能帮助到你 ：）

 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);
});

Answer 2

这是一种方式，你可以插入图像作为背景图片，或作为<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 />元素插入到该专区。只需使用任何一个适合您。

你可以看到在这个JS Fiddle demo在行动代码。

希望这可以帮助 ：）