Question

这仅用于CSS和图像。我试图多次加载同一张图片（以避免多次加载）。上面的代码仅将img附加到最后一个div。不知道为什么

var img = new Image();
img.src = "https://i.picsum.photos/id/1062/600/400.jpg";
for (var i = 0; i < 10; i++) {
  var div = document.createElement("div"); 
  div.classList.add("section-"+i);
  div.appendChild(img);
  document.getElementById("wrapper").appendChild(div);
}

Answer 1

您需要在循环的每次迭代中创建图像的新实例，而不仅仅是一次。

通过不将其放置在循环中，可以创建图像节点的一个实例，并在每次创建新的div并使用appendChild()时将其移至新元素，从而不创建新的图像元素。您只是在引用原始节点并将其移动。

通过在每个循环上创建一个新的图像节点，可以为每个div创建一个新的图像节点，以提供所需的结果。

注意：如果图像相同，则每次应从缓存中加载。

for (var i = 0; i < 10; i++) {
  var img = new Image();
  img.src = "https://i.picsum.photos/id/1062/600/400.jpg";

  var div = document.createElement("div"); 
  div.classList.add("section-"+i);
  div.appendChild(img);
  document.getElementById("wrapper").appendChild(div);
}

js-多次加载同一张图片

1 个答案: