Как добавить список изображений в документ из массива URL-адресов?

Ответ 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 Метод массива.

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

Bam! Здесь fiddle

Ответ 2

Поскольку предлагается еще одна щедрость (и я должен признать, что я не полностью согласен с некоторыми аргументами в другом ответе, который, однако, использует причудливые и даже, возможно, несколько "тяжелые" современные методы), я предполагаю, что У Нила есть более очевидный ответ, я собираюсь сделать это.

Наиболее прямолинейная вещь, которая приходит на ум (учитывая, что Q не устанавливает никаких требований к разметке/атрибутам/etc), является: Array.prototype. join ([separator = ',']), который объединяет все элементы массива в строку, разделенную чем-либо, что передается как arguments[0] (aka separator), который принуждается к строке (если необходимо) или по умолчанию используется строка ',' (запятая), если ее не указывать.
_{join ing часто был очень популярным способом конкатенации строк, потому что раньше он был быстрее на более старых и/или менее "популярных" /оптимизированных браузерах. В более поздних, более популярных и оптимизированных браузерах, строка-конкатенация с использованием + в настоящее время выглядит быстрее (что на самом деле имеет смысл). Однако при написании кода, который предназначен для обратной совместимости, часто имеет смысл выбирать/использовать наименее медленный общий знаменатель (поскольку скорости-монстры уже оптимизированы). См. Ответы (и связанные jsperfs) на этот и этот вопрос о SO, например.}

Теперь, когда у нас есть строка, мы будем использовать ее вместе с 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>