Question

我有一个照片库，图像从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>

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

Answer 1

您应该在服务器上执行此操作，而不是在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);

Answer 2

有两种方法可以动态生成此类图像列表

在服务器端，如果您可以动态生成HTML，则可以使用您正在使用的任何服务器端语言/模板语言来执行此操作
在客户端，您可以动态插入图像节点，幸运的是JavaScript有一个for循环

e.g。

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

客户端的好处是，在某些情况下，您可能会懒惰，并且在需要之前不插入任何图像或插入所需的任何数量，从而加快页面加载时间。

是否有更快的方法，而不是这一次插入所有图片

2 个答案: