Как добавить список изображений в документ из массива 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>

Ответ 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>