如何将图像列表从URL数组添加到文档中？ [英] How to add a list of images to the document from an array of URLs?

问题描述

假设我有一个包含图像源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://lorent.co.za/380/240'，
'http://dummyimage.com/250/ffffff/000000'，
'http://lorempixel.com/g/400/200/'，
'http://lorempixel.com /克/ 400/200 /运动/']; 
 var container = document.getElementById（'imageContainer'）; （var i = 0，j = imgs.length; i< j; i ++）{
 var img = document.createElement（'img'）; 
 
。 
 img.src = imgs [i]; // img [i]指的是当前的URL。 
 container.appendChild（img）; 
} 
  

然而，这并不是特别有效：

• 我们正在使用不必要的循环


• 我们在每次迭代时都要查询dom
  
• 我们介绍全球 i 和 j 变量


• 我们没有使用JavaScript的美妙数组方法！
  

相反，让我们使用 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！这是小提琴

Suppose I have an array full of image source URLs, like:

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

How do I grab all of those images and insert them into my page at a particular location? Say...

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

解决方案

One way to do this is to loop over your array of images, create an img element for each, set the element's src to the current image source in your array, then append it to your container. This would look like:

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

However, this isn't particularly efficient:

• We're using an unnecessary loop
• We're querying the dom on every iteration
• We're introducing the global i and j variables
• We're not using JavaScript's wonderful Array methods!

Instead, let's use a documentFragment and JavaScript's forEach Array method.

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

This way we're:

• Only hitting the DOM once
• Not introducing global variables
• Maintaining cleaner, easier to read code!

Then just to make sure your new images look nice, add a bit of CSS to the mix:

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

Bam! Here's a fiddle

这篇关于如何将图像列表从URL数组添加到文档中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！