0

我有一个包含 590 张图片的目录，我的问题是能够单独使用 jquery 从该目录中提取图像并附加它们，我发现这些图像不能单独使用 jquery/javascript 完成。或者，我将图片重命名为 1.jpg,2.jpg ... 590.jpg 。如何使用 jquery 将 590 个图像附加到一个 div 让我留下应用于 src'lq'+numberofappended+'.jpg'和类的附加元素的数量'image-'+numberofappended

结果给我留下了以下

<div class="imagecontainer">
<img src="lq/1.jpg" class="image-1"/>
<img src="lq/2.jpg" class="image-2"/>
<img src="lq/3.jpg" class="image-3"/>
...
<img src="lq/590.jpg" class="image-590"/>
</div>

如果我所拥有的内容过于广泛，我可以一次附加 50 张图像，并在每次到达页面末尾时应用 jquery 分页加载另外 50 张图像。

我个人知道如何在 jquery 中使用 append，但我不知道如何单独附加图像，以及根据哪个附加编号将其应用于 src 和类。

4

3 回答 3

1

制作图像 html 的数组。

var imgs=[];
for( i=1; i<= 590; i++){
    imgs.push('<img src="lq/'+i+'/.jpg" class="image-'+i+'"/>')
}

现在您可以将它们全部添加：

 $('.imagecontainer').html(imgs.join(''));

或者，您可以根据 UI 中最有效的方式（例如滚动事件）错开加载它们。使用 slice() 获取要用于 append() 的数组部分

添加前 50 个：

  var first50= imgs.slice(0,50);
 $('.imagecontainer').html(first50.join(''));
于 2012-06-18T21:12:00.673 回答
0

for 循环应该可以解决问题，

var images = "";
for (var i = 1; i <= 5; i++) {
    images += '<img src="lq/'+i+'.jpg" class="image-'+i+'"/>'
}

$('.imagecontainer').append(images);

输出

<div class="imagecontainer">
    <img src="lq/1.jpg" class="image-1">
    <img src="lq/2.jpg" class="image-2">
    <img src="lq/3.jpg" class="image-3">
    <img src="lq/4.jpg" class="image-4">
    <img src="lq/5.jpg" class="image-5">
</div>

演示

于 2012-06-18T21:05:51.310 回答
0

干得好; 将图像存储在一个数组中，加入它们并一次性追加。

var images = [];

for (var i = 1; i <= 50; i++) {
    images.push('<img src="lq/'+i+'.jpg" class="image-'+i+'"/>');
}

$('.imagecontainer').append(images.join('\n'));
于 2012-06-18T21:08:32.153 回答