如何从URL数组向文档添加图像列表？

一种方法是遍历图像数组，img为每个图像创建一个元素，将元素的src设置为数组中的当前图像源，然后将其附加到容器中。看起来像：

var imgs = ['http://lorempizza.com/380/240', 
            'http://dummyimage.com/250/ffffff/000000', 
            'http://lorempixel.com/g/400/200/', 
            'http://lorempixel.com/g/400/200/sports/'];
var container = document.getElementById('imageContainer');

for (var i = 0, j = imgs.length; i < j; i++) {
    var img = document.createElement('img');
    img.src = imgs[i]; // img[i] refers to the current URL.
    container.appendChild(img);
}

但是，这并不是特别有效：

• 我们正在使用不必要的循环
• 我们在每次迭代中查询dom
• 我们正在介绍全局i和j变量
• 我们没有使用JavaScript出色的Array方法！

相反，让我们使用documentFragment和JavaScript的forEach Array方法。

var imgs = ['http://lorempizza.com/380/240', 
            'http://dummyimage.com/250/ffffff/000000', 
            'http://lorempixel.com/g/400/200/', 
            'http://lorempixel.com/g/400/200/sports/'];
var container = document.getElementById('imageContainer');
var docFrag = document.createDocumentFragment();

imgs.forEach(function(url, index, originalArray) {
    var img = document.createElement('img');
    img.src = url;
    docFrag.appendChild(img);
});


container.appendChild(docFrag);

这样我们可以：

• 只打一次DOM
• 不引入全局变量
• 保持整洁，易于阅读的代码！

然后只是为了确保您的新图像看起来不错，在混合中添加一些CSS：

#imageContainer img {
    width: 20%;
    height: auto;
}

am！这是一个小提琴