Question

我有一个带图片的文件夹：

image-1-1.jpg
image-2-2.jpg
image-2-3.jpg
image-2-4.jpg
image-2-5.jpg
image-3-1.jpg
image-3-2.jpg
image-3-3.jpg
...

但更长。我也有这些链接：

link 1
link 2
link 3
...

我想要它，以便当用户点击其中一个链接时，相应的图像将被加载到我的网页中。（链接1 - ＆gt;加载类别'image-1-something'的所有图像）正如您所看到的，图像数量因类别而异。我试过这个：

var img = new Image();
for(var I=1;i<11/*because the maximum amount of images in a category is 10*/;I++){
 img.src = "images/image-"+category+"-"+I+".jpg";
 if(img.width != 0){
  document.getElementById("myDiv").appendChild(img);
 }

但问题是脚本检查图像的宽度，如果它存在，则在图像完全加载之前。

然后我尝试了onload事件：

for(var I=1;i<11;i++){
 img.src = "images/image-"+category+"-"+I+".jpg";
 img.onload = "if(img.width != 0){
  document.getElementById('myDiv').appendChild(img);
 }";

但由于某种原因，onload似乎在这个循环中不起作用。

Answer 1

好的，这甚至都不是正确的代码，所以这是你可以尝试的：

编辑 - 忘了一行

for(var i=1;i<11;i++){
 var img = new Image();
 img.onload = function(){ if(this.width != 0){
  document.getElementById('myDiv').appendChild(this);
 }};
 img.src = "images/image-"+category+"-"+i+".jpg";
};

加载具有特定名称的图像

1 个答案: