减少显示多个图像时所需的代码量 HTML CSS答案

【问题标题】：reduce the amount of code needed when displaying multiple images HTML CSS减少显示多个图像时所需的代码量 HTML CSS
【发布时间】：2012-07-02 20:20:04
【问题描述】：

只是想知道在 HTML 中显示大量图像时是否有办法减少所需的代码量？

我想在画廊中显示大约 2-300 张图片，此时 HTML 将如下所示：

<div id="scroller>
    <img src="/Content/images/decking/decking-1.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-2.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-3.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-4.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-5.jpg" width="100" alt="" />
</div>

...不过是图片“decking-250.jpg”。

有没有更有效的方法来显示图像，这样我就没有 250 多行的“img src”HTML？

文件名中唯一改变的部分是“-1”、“-2”、“-3”等。其余部分，包括 Alt 标签可以保持为空。

我正在使用 ASP.net 在线教程作为指南在 ASP.Net MVC3 Razor 中构建此站点，如果这有助于想到任何解决方案，如果它只是必须以这种方式完成，那也很好 - 我只是想知道我是否应该考虑学习另一种方法？

非常感谢。

【问题讨论】：

标签： html css asp.net-mvc-3 performance

【解决方案1】：

这就是 HTML 的工作方式。您无法减少它，因为每张图片都需要一个 img 标签。您可以通过 PHP、JS 等动态创建该代码。但最后你会得到一长串img 标签，可能被其他标签单独包装（例如在一个列表中）。

【讨论】：

谢谢Feeela，感谢您的解释-我很乐意不理会它，因为问题只是询问是否有更好的方法来做到这一点（而且我对如何做到这一点几乎一无所知用 PHP 或 JS 编写脚本来为我做这件事）。

【解决方案2】：

我同意 Feela 的观点，尽管它可能看起来很冗长，但您的代码几乎是防弹的。但是，如果您可以使用（或已经在使用）像 JS 这样的东西，那么有一些选择。这未经测试，但您可以在 Jquery/Javascript 中设置一个 for-loop 语句来压缩代码。例如：

for (i=1; i < 250; i++) {
    $('#scroller').append('<img src="/Content/images/decking/decking-' + i.toString() + '.jpg" width="100" alt="" />');
}

我不是 ASP 编码员，但也许它提供了一些功能相似的东西。

【讨论】：

谢谢@Shrug，我也会研究一下那个方法，看看能不能搞定。