如何从一组URL中添加图像列表到文档？

Question

假设我有一个包含图像源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>

Answer 1

一种方法是循环遍历图像数组,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;
}

巴姆!这是一个小提琴

Answer 2

由于提供了另一个赏金（我必须承认我不完全同意另一个答案中的一些论点，但它确实使用了花哨的甚至可以说有些“沉重”的现代方法），我假设 Neal 有一个考虑到更明显的答案，我将尝试一下。

想到的最直接的事情（假设 Q 没有对图像的标记/属性/等设置任何要求）是：Array.prototype。join ([separator = ','])方法将数组的所有元素连接成一个字符串，由作为arguments[0]（aka separator）传递的任何内容分隔，该字符串被强制转换为字符串（如果需要）或默认为字符串 ' ,'（逗号） ) 省略时。
_{joining 通常是一种非常流行的字符串连接方式，因为它曾经在较旧和/或不太“流行”/“优化”的浏览器上更快。在后来更流行和更好优化的浏览器上，字符串连接使用+目前似乎更快（这实际上是有道理的）。然而，当编写旨在向后兼容的代码时，选择/使用最慢的公分母通常是有意义的（因为速度怪物已经被优化）。例如，在 SO 上查看这个和这个问题的答案（和链接的 jsperfs）。}

现在，我们有一个字符串，我们可以使用它连同element.innerHTML这往往更快比访问DOM来createElement的图像，并将其添加到documentFragment了布局移动这些元素所需的父元素之前的DOM一遍又一遍。 .. _{不要误会我的意思，DocumentFragment的是一个很酷的和有用的事情时，我们需要做很多DOMwork的，而不让于版图的重绘在对每一个操作的方法。}

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

document.getElementById('imageContainer')
        .innerHTML = '<img src="' + imgs.join('" /><img src="') + '" />';

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

这有一个小问题：如果我们的img数组是空的，我们就会得到一个“空”的图像。没有什么是简单的if不能处理困难的.. 由于array.length是基于 1 的，我们甚至可以让 javascript 强制转换为0to的长度false。
此外，我们可以将其更改/膨胀为匿名（未命名）立即调用的函数表达式（IIFE）：

(function(container, arr){
  if(arr.length) container.innerHTML = '<img src="' + arr.join('" /><img src="') + '" />';
}( document.getElementById('imageContainer')
 , imgs
));

甚至接受围绕 url 的尾随和前导 HTML 代码的参数：

(function(container, arr, leadStr, trailStr){
  if(arr.length) container.innerHTML = leadStr + arr.join(trailStr+leadStr) + trailStr;
}( document.getElementById('imageContainer')
 , imgs
 , '<img src="'
 , '" />'
));

等等等等等等...

根据实际（浏览器的）引擎实现（和优化），这个“加入”（像所有其他解决方案一样）很可能在后台仍然有一个循环..

因为forEach通常被视为一种有点慢的方法（我们都同意在后台仍然有一个循环）它往往（一如既往，取决于引擎）做比可能需要的更多的工作，它会回调一个函数（传递围绕数组中的每个元素的一些（3）个参数），我将在这里展示一个循环版本，使用字符串连接（为了这个答案的多样性和“现代”“更快”字符串连接）：

(function(container, arr, leadStr, trailStr){
  var i=0, L=arr.length, r='';
  if(L){
    for(; i<L ; ++i){
      r += leadStr + arr[i] + trailStr;
    }
  container.innerHTML = r;
  }
}( document.getElementById('imageContainer')
 , imgs
 , '<img src="'
 , '" />'
));

所有这些都应该适用于任何使用 HTML4 和 HTML5 的浏览器。另请注意，上述内容将覆盖“容器”的内容（不添加）。

然而，DOM 方法在技术上是 X(H)ML 所必需的，因为元素没有innerHTML正式的属性（尽管很多浏览器不介意），但我们仍然可以使用一个简单的（非隐藏）循环，而不会向全局范围泄漏任何内容，只需修改上述函数即可：

(function(container, arr){
  var i = 0, L = arr.length, docFrag = document.createDocumentFragment();
  if(L){
    for(; i<L; ++i){
      docFrag.appendChild(document.createElement('img')).src = arr[i];
    }
    container.appendChild(docFrag);
  }
}( document.getElementById('imageContainer')
 , imgs
));

请注意，此示例添加到“容器”中的内容。

这些示例旨在概述以下几点：innerHTML, join，无需引入全局/泄漏变量，最重要的是：没有什么可以“保存”“不必要的”循环（实际上，取决于您在做什么，可见循环实际上可能更快）。

但是，人们可能只是命名包装函数（上面示例中的 IIFE）并调用它们，传递所需的参数。这样你就可以动态地添加或更新/覆盖你的图像区域（比如当你通过 ajax 加载不同的图像 url-array 等时）不止一次。
对于这最后一个示例，我cloneNode以一种“聪明”的方式使用（这将很好地进行 g-zip）以最小化一些查找（同时不会给我们留下剩余但未放置的图像节点）：

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

function addPics(container, arr){
  var i = 0, L = arr.length, docFrag = document.createDocumentFragment(), img;
  if(L){
    for( docFrag.appendChild(img=document.createElement('img')).src = arr[i]
       ; ++i<L
       ; docFrag.appendChild(img.cloneNode(false)).src = arr[i]
       );
    container.appendChild(docFrag);
  }
}

addPics( document.getElementById('imageContainer'), imgs );

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

希望这些例子之间的解释是尼尔想到的。
无论如何，现在应该在这个和其他答案之间有足够的参考来解决。