有，而不是这个插入的所有图片一次

问题描述：

我有一个图片库，图片是从0开始命名至170，我将他们像这样一个更快的方法：有，而不是这个插入的所有图片一次

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 

     <!-- load Galleria --> 
     <script src="galleria-1.2.7.min.js"></script> 

    </head> 
<body> 
    <div class="content"> 
     <h1>Galleria Classic Theme</h1> 
     <p>Demonstrating a basic gallery example.</p> 

     <!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary --> 

     <div id="galleria"> 
      <a href="images/0.jpg"> 
       <img src="images/0.jpg"> 
      </a> 
      <a href="images/1.JPG"> 
       <img src="images/1.JPG"> 
      </a> 
      <a href="images/2.JPG"> 
       <img src="images/2.JPG"> 
      </a> 
      <a href="images/3.JPG"> 
       <img src="images/3.JPG"> 
      </a> 
      <a href="images/4.JPG"> 
       <img src="images/4.JPG"> 
      </a> 
      <a href="images/5.JPG"> 
       <img src="images/5.JPG"> 
      </a> 
        </div> 

     <p class="cred">Made by <a href="http://galleria.aino.se">Galleria</a>.</p> 
    </div> 

    <script>

我可以使用的方法在哪里我不需要输入每张照片的名称？

'for'循环通常每次都会做一件事。你能否详细说明你试图达到的目标，你尝试过什么，以及你到底意味着什么？ – Tadeck 2012-04-19 01:13:12

答

你应该在服务器上这样做，而不是在JavaScript中的客户端上。

然而，要回答你的问题，

var escape_amount = 170, resHtml = '', ii; 
    for (ii = 0; ii < escape_amount; ii++) 
    { 
     resHtml += '<a href="images/'+ii+'.jpg"><img src="images/'+ii+'"></a>'; 
    } 
    $('#galleria').html(resHtml);

'你应该在服务器上这样做，而不是在JavaScript中的客户端上。真的取决于网站的架构。如果你使用的是客户端MVC（这对UX很好），那么你会做很多这样的事情。 – djlumley 2012-04-19 01:18:16

我恭敬地不同意。我认为只有极少数情况下，您应该在客户端对DOM进行批量修改的情况下，至少在不通过网络提供适当的语义标记的情况下。 – 2012-04-19 01:20:28

@ JohnGreen-PageSpike我认为这是旧派，现在许多应用程序需要对DOM进行大规模修改，服务器只能像数据库那样工作 – 2012-04-19 01:23:29

答

有两种方法可以动态生成图像

在服务器端的这种列表，如果你能生成HTML动态，你可以做到这一点的无论你使用哪种服务器端语言/模板语言
在客户端，你可以动态插入图像节点，幸运的是，JavaScript有for for循环

例如，

var galleria = $('#galleria') 
for(var i=0;i<170;i++){ 
    var imgName = "images/"+i+".JPG" 
    galleria.append('<a href="'+imgName+'"><img src="'+imgName+'"></a>') 
}

受益于客户端是，在某些情况下，你可以偷懒，直到需要不插入任何图像或插入的任何需要的数量，从而更快的网页加载时间。

脚本是jquery照片库的一部分。我如何将它添加到服务器？ – luke 2012-04-19 01:23:57

@luke什么是jquery照片库？无论如何，你目前正在手写和从服务器提供服务，而不是由服务器上的一些代码 – 2012-04-19 01:25:01

如何实现上面的代码到我的jQuery库？ – luke 2012-04-19 01:31:00

有，而不是这个插入的所有图片一次

相关推荐