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

时间:2018-11-10 00:40:46

标签: arrays ajax loops dom

我从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>

2 个答案:

答案 0 :(得分:1)

尝试在循环内创建元素。

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

答案 1 :(得分: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循环)