我从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>
答案 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
循环)