处理网页上数百张图像的聪明方法是什么？答案

【问题标题】：What's the smart way to handle hundreds of images on a web page?处理网页上数百张图像的聪明方法是什么？
【发布时间】：2015-04-24 14:24:29
【问题描述】：

我有一个包含数百张图片的简单网页。像这样……

<img src="img/photo00001.jpg">
<img src="img/photo00002.jpg">
<img src="img/photo00003.jpg">
... and so on

我不想花几个小时复制粘贴和编辑数字，后来才意识到我忘记了它们上面的锚标记。我知道 Wordpress 会这样做，但这应该是一个简单的项目，并且所有的布局和设计都已经完成，主题化将是一个完全的矫枉过正。

解决这个问题的聪明方法是什么？

自定义自动构建的 CMS？ 我听说过，但不太了解
生成 HTML 的 Sublime 插件？ 不要认为它写了 img 路径
其他想法？

请注意，我是前端人员。

【问题讨论】：

也许只有我，但你的问题没有意义？
崇高？内容管理系统？为什么不在纯 JavaScript for 语句中只使用 document.getElementById("containerId").appendChild(...)？

标签： javascript html css content-management-system

【解决方案1】：

我不知道这是最好的方法，但我过去使用 php 做过类似的事情（不要害怕！）。

<body>
 <div class="img-container>
  <?php
  define('N_IMAGES', 20);
  $class = 'image';
  for ($i=0;$i<N_IMAGES;$i++) {
    echo "<img src = \"img/photo"+$i+"\" class=\"$class\">";
  }
?>
</div>
</body>

细分：

您根据拥有的图像数量使用常量 N_IMAGES。
使用 for 循环“echo”语句。这样做是返回一个每个 iamge 路由的图像标签。
您可以为每个图像关联一个类以及任何属性您可能需要。

小心。您需要一个本地或远程服务器才能使 php 工作，以及保存为 .php，而不是 html。

如果您不介意添加一些基本的 php，这是一种快速、干净的方法。

【讨论】：

感谢 JF 我猜这是最好的解决方案，但我选择使用 javascript 解决方案，因为它不需要服务器，而且它使用的是我已经理解的语言。不过投了赞成票。崩溃真的很友善。

【解决方案2】：

它真的很丑，但我认为它会做你想要的：

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>

<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<script type="text/javascript">

function addZero(number){
	var zeros;
	switch(number.toString().length) {
    case 1:
        zeros= "0000";
        break;
    case 2:
        zeros= "000";
        break;
    case 3:
        zeros= "00";
        break;
    case 4:
        zeros= "0";
        break;
	}

	return zeros;
}

for(var i=0;i<1030; i++){
	$("body").append("<img src='img/photo"+ addZero(i) + i +".jpg'/>");
}
</script>
</body>
</html>

将其复制/粘贴到 .html 文件中并运行它，然后复制生成页面的源代码...

祝你好运！

【讨论】：

谢谢利奥。添加零很聪明。