有，而不是這個插入的所有圖片一次

我有一個圖片庫，圖片是從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>

我可以使用的方法在哪裏我不需要輸入每張照片的名稱？

來源

2012-04-19 luke

'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);

來源

2012-04-19 01:17:03

'你應該在服務器上這樣做，而不是在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>') 
}

受益於客戶端是，在某些情況下，你可以偷懶，直到需要不插入任何圖像或插入的任何需要的數量，從而更快的網頁加載時間。

來源

2012-04-19 01:18:03

腳本是jquery照片庫的一部分。我如何將它添加到服務器？ – luke 2012-04-19 01:23:57

@luke什麼是jquery照片庫？無論如何，你目前正在手寫和從服務器提供服務，而不是由服務器上的一些代碼 – 2012-04-19 01:25:01

如何實現上面的代碼到我的jQuery庫？ – luke 2012-04-19 01:31:00

有，而不是這個插入的所有圖片一次

回答

相關問題