如果存在，则将图像添加到网站

Question

我有一个包含一些图片的文件夹：

image1-1.jpg
image1-2.jpg
image2-1.jpg
image2-2.jpg
image2-3.jpg
image2-4.jpg
image3-1.jpg
image3-2.jpg

和一系列链接：

link 1
link 2
link 3

我想只使用JavaScript，以便当用户点击其中一个链接时，相应的图片将被加载并插入我的网页。我尝试使用 for 循环，但它总是插入最高'类别'图像的图像数量。例如，我单击链接1但它插入了4个图像，因为image2最多可达4个。

我试过这个：

var category = <somenumber>
var img = new Image();
for(var i=1;i<375/*the max is 374 images*/;i++){
  img.src = "image"+category+"-"+I+".jpg";
  if(img.width != 0){
    $('<img src="'+img.src+'" width="200">').appendTo('#imgbox');// I use jquery to
  }
}

PS：我正在尝试不使用php或类似的东西

Answer 1

根据图像列表，名称具有以下方案：

image<category>-<number>.jpg

您的for循环正在生成

等图片

image<number>.jpg

这怎么能加载任何图像？我假设，像image<number>.jpg这样的图像确实存在，但作为错误的副作用，这隐藏了错误。

下一步：您创建一个图像对象，并在循环中为这一个图像分配一个新的src。此外，您只使用图像对象的URL，该URL已作为字符串存在。 两种可能性：

1）在循环中创建一个图像对象：

for(var i=1;i<375/*the max is 374 images*/;i++){
  var img = new Image();

  $( img ).load(function() {
     if(this.width != 0){
        $(this).appendTo('#imgbox');
     }
  });
  img.src = "image"+i+".jpg";
}

有一个小提琴here

2）只需使用url，无图像对象：

for(var i=1;i<375/*the max is 374 images*/;i++){

    $('<img src=image'+i+'.jpg width="200">').appendTo('#imgbox');
}

至少你需要纠正我上面写的关于图像名称的内容。