如何将 URL 数组中的图像列表添加到文档中？

假设我有一个充满图像源 URL 的数组，例如：

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/'];

如何抓取所有这些图像并将它们插入到我的页面的特定位置？说...

<div id="imageContainer"></div>

执行此操作的一种方法是循环图像数组，创建一个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 and j变量
• 我们没有使用 JavaScript 美妙的数组方法！

相反，让我们使用文档片段 https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment和 JavaScript 的forEach https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach数组法。

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;
}

嘭！这是一个fiddle http://jsfiddle.net/gcjkL5jw/3/