使用 For 循环通过图像 URL 数组创建新的 HTML 图像答案

【问题标题】：Creating new HTML images using a For loop through an array of image URLs使用 For 循环通过图像 URL 数组创建新的 HTML 图像
【发布时间】：2019-04-13 13:41:58
【问题描述】：

我有一个 AJAX 请求返回的包含 40 个不同图像 URL 的数组。我正在尝试使用 For 循环为数组中的每个 URL 创建一个新的 HTML 图像元素，如下面的代码所示。出于某种原因，它只在第一个 URL 处显示图像，仅此而已。知道为什么其他 39 人没有出现吗？

$(document).ready(function() {
  $.ajax({
    type: 'GET',
    dataType: 'json',
    url: 'https://****/images',
    success: function(data) {
      console.log(data);
      let container = document.getElementById('feed');
      let image = document.createElement("img");
      for (let i = 0; i < data.length; i++) {
        image.setAttribute('src', data[i]);
        container.appendChild(image);
      }
    }
  });
});


<body>

  <div id="feed">
  </div>

</body>

【问题讨论】：

标签： arrays ajax loops dom

【解决方案1】：

创建图像的方法是使用new Image()，当一次将多个节点附加到DOM时，最好先将图像节点附加到document fragment中，并且只有在所有图像都附加到片段时，然后将片段本身附加到文档中（防止redundant repaints）

// dummy data
const data = ['http://placekitten.com/100/100',
              'http://placekitten.com/100/150',
              'http://placekitten.com/100/180',
              'http://placekitten.com/100/200']

// create a dumpster-node for the images to reside in 
const fragment = document.createDocumentFragment();
 
// iterate the data and create <img> elements
data.forEach(url => {
     let image = new Image()
     image.src = url;
     fragment.appendChild(image);
})

// dump the fragment into the DOM all the once (FTW)
document.body.appendChild(fragment);

我在示例中使用了Array forEach 迭代器，因为我认为它更容易，但您可以使用for 循环（或for..of 循环）

【讨论】：

【解决方案2】：

尝试在循环内创建元素。

  for (let i = 0; i < data.length; i++) {
     let image = document.createElement("img");
     image.setAttribute('src', data[i]);
     container.appendChild(image);
  }

【讨论】：