Question

我必须将大量图片导入我的网站，这些图片基本相同。我不想像这样一遍又一遍地复制和粘贴代码：

<img id="example1" src="example.png" />
<img id="example2" src="example.png" />

那么有没有办法在我的网站/ HTML中使用for循环或Javascript中的某些内容加载这些图像？

Answer 1

window.addEventListener("load", picture);
function picture()
{
  var pictures = document.getElementsByTagName("img");
  for(var i =0; i<pictures.length; i++)
  {
   pictures[i].setAttribute("src", "example"+i+".jpg");
  }
}

了解这将获得每个img标记并为您增加src。文件名也需要增量。没有php或某种可以读取文件夹内容的语言，没有真正简单的方法可以以编程方式进行。

Answer 2

最简单的方法可能是使用Image()构造函数创建图像，然后逐个附加它们。

＆＃13;

for (var i = 0; i < 10; i++) {
  var img = new Image();
  img.src = "http://placehold.it/100x100.png";

  document.body.appendChild(img);
}

＆＃13;

Answer 3

如果您只按特定顺序购买它们：

imagesNumbered(prefix,extension,num) {
    var images = [];
    for(var i=0;i<num;i++) {
        images[i] = new Image();
        images[i].src = prefix+i+extension;
        images[i].alt = prefix+i+extension;
    }
    return images;
}

// returns img/pic0.jpg ... img/pic9.jpg
var imgs = imagesNumbered('img/pic','.jpg',10);

或者如果您需要明确命名它们：

imagesNamed(path,names) {
    var images = [];
    for(var i=0,l=names.length;i<l;i++) {
        images[i] = new Image();
        images[i].src = path+names[i];
        images[i].alt = path+names[i];
    }
    return images;
}

// returns img/foo.jpg, img/bar.png
var names = ['foo.jpg','bar.png'];
var imgs = imagesNamed('img/',names);

无论你使用哪一个，你都会得到一个数组。在这里，我们将它们附加到ID为容器的元素：

var container = document.getElementById('container');
for(var i=0,l=imgs.length;i<l;i++)
    { container.appendChild(imgs[i]); }

请注意，我还设置了alt属性，因此如果由于某种原因无法加载图片，您可以更快地追踪问题。

如何通过Javascript加载图像？

3 个答案: