Создание новых HTML-изображений с помощью цикла For через массив URL-адресов изображений - PullRequest
Новая
       6

Создание новых HTML-изображений с помощью цикла For через массив URL-адресов изображений

0 голосов
/ 10 ноября 2018

У меня есть массив из 40 различных URL-адресов изображений, возвращаемых из запроса AJAX. Я пытаюсь создать новый элемент изображения HTML для каждого URL в массиве, используя цикл For, как показано в приведенном ниже коде. По какой-то причине, он отображает изображение только по первому 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 голосов
/ 13 ноября 2018

Способ создания изображений - new Image(), и при одновременном добавлении нескольких узлов в DOM лучше сначала добавить узлы изображения в фрагмент документа , итолько когда все изображения добавлены к фрагменту, затем добавьте сам фрагмент в документ (предотвращает избыточные перерисовки ) 

// 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 петля)

0 голосов
/ 10 ноября 2018

Попробуйте создать элемент внутри цикла. 

  for (let i = 0; i < data.length; i++) {
     let image = document.createElement("img");
     image.setAttribute('src', data[i]);
     container.appendChild(image);
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...