1

我刚刚学会了在我的 ebay + 网站列表中生成缩略图所需的最低限度。基本上，我在一个列表中最多有 12 张图片，并且为了在创建新列表时不必为每张图片写出 URL，我已将其设置为只需要编写一次文件名（变量“picname ") 和图片数量（变量“picnum”），剩下的由 javascript 完成。它工作正常，但似乎很啰嗦。

如何缩短/优化代码？我确信某种循环可以解决问题，但是在花了一整天的时间搜索和大量试验和错误之后，我就是想不通。

我想将以下代码块缩短/优化为循环：

imagenum=1;
if (imagenum <= picnum) {image1 = new Image(); image1.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb1 = new Image(); thumb1.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image2 = new Image(); image2.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb2 = new Image(); thumb2.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image3 = new Image(); image3.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb3 = new Image(); thumb3.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";;imagenum++;}
if (imagenum <= picnum) {image4 = new Image(); image4.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb4 = new Image(); thumb4.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image5 = new Image(); image5.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb5 = new Image(); thumb5.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image6 = new Image(); image6.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb6 = new Image(); thumb6.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image7 = new Image(); image7.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb7 = new Image(); thumb7.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image8 = new Image(); image8.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb8 = new Image(); thumb8.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image9 = new Image(); image9.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb9 = new Image(); thumb9.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image10 = new Image(); image10.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb10 = new Image(); thumb10.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image11 = new Image(); image11.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb11 = new Image(); thumb11.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image12 = new Image(); image12.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb12 = new Image(); thumb12.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}

我假设我需要以下内容：

for (imagenum=1; imagenum<picnum; imagenum++) {image(imagenum) = new Image(); image(imagenum).src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb(imagenum) = new Image(); thumb(imagenum).src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";}

但是我显然有语法错误，因为那不起作用。我不知道如何使变量名随着循环的每个循环而递增，非常感谢一些帮助！

4

4 回答 4

4

使用数组。像这样的东西：

var images = [];
for (var i = 0; i < picnum; i++)
{
    images[i] = {
        Image: new Image(),
        Thumb: new Image()
    };

    images[i].Image.src = ...;
    images[i].Thumb.src = ...;
}
于 2012-10-11T12:48:20.400 回答
2

您应该为此类任务使用数组。因此，按照上面的代码可能会起作用：

// create the array
var images = [], thumbs = [];

// loop through all images
for ( var imagenum=1; imagenum<picnum; imagenum++) {
  images[imagenum] = new Image(); 
  images[imagenum].src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; 
  thumbs[imagenum] = new Image(); 
  thumbs[imagenum].src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";
}

images[1]然后，您可以通过 和 访问所有图像和相应的缩略图thumbs[1]。

于 2012-10-11T12:48:50.897 回答
0

您需要使用方括号来引用数组。

var myImages = [];
for (var i=1; i<10; i++) {
    var newImg = new Image();
    newImage.src = "foo.gif";
    myImages[i] = newImage;
}
于 2012-10-11T12:48:44.877 回答
0

您可以拥有一个包含 12 个不同对象的数组，而不是 12 个不同的变量。那么你的代码应该是这样的：

var imgArray = [];
var thumbArray = [];
for (var i = 0; i < 12; i++) {
    var img = new Image();
    img.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+i+").jpg";
    imgArray.push(img);
    var tmb = new Image();
    tmb.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+i+").jpg";
    thumbArray.push(tmb);
}

PS：代码未经测试可以正常工作，但它应该可以工作......

于 2012-10-11T12:52:59.330 回答