Question

我有一个表示.png元素的URI数组，例如“ ./img/diamond-red-solid-1.png”。

我想将数组“ gameDeck [0]，gameDeck [1]等的每个元素分配给HTML中的div ID。我是否需要将这些元素标识为= SRC.IMG？

charArray[1][2][3][0] = '0';

Answer 1

我理解您的问题的方式是，您希望将HTML中的div定位为card1，card2，card3 ... card12等。

您想在每个div中插入一个img标签，其中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}')`;来使用{{ 1}}图片loadedImage[i]，将其加载为src的背景图片。或者，您可以使用divs下方的注释行将document.getElementById(`card${i}`).appendChild(loadedImage[i]);元素插入该div中。只需使用最适合您的一种即可。

您可以在此JS Fiddle demo中查看运行中的代码。

希望这会有所帮助：）

将图像元素数组分配给DOM ID

2 个答案: