Javascript 将图像添加到网站（如果存在）

我有一个文件夹，其中包含一些图像：

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

var类别=
var img=新图像（）；
对于（var i=1；i，根据图像列表，名称具有以下方案：

image<category>-<number>.jpg

这如何加载任何图像？我假设像
image.jpg
这样的图像确实存在，但作为错误的副作用，这是隐藏错误

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

1） 在循环中创建图像对象：
for（var i=1；我能告诉你你试过了吗？试过了
newimage（）.onload
？我尝试过，但在for循环中，src在图像加载之前更改。通过javascript执行编辑是一个非常糟糕的主意。在PHP中，有一个
glob
函数可以满足您的需要。通常，您现在用无效请求轰炸您的服务器。类似于暴力攻击。第一个选项的问题是，一半的images不会弹出，因为它们在加载之前正在被检查。第二个会创建374个img对象。
image<number>.jpg

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

for(var i=1;i<375/*the max is 374 images*/;i++){
  
    $('<img src=image'+i+'.jpg width="200">').appendTo('#imgbox');
}