0

只是想知道是否有一种方法可以减少在 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 中构建这个站点，如果这有助于想到任何解决方案，如果它只是必须以这种方式完成，那也很好 - 我只是想知道是否我应该考虑学习另一种方法吗？

提前谢谢了。

4

2 回答 2

1

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

于 2012-07-02T10:42:25.993 回答
1

我同意 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 编码器，但也许它提供了一些功能相似的东西。

于 2012-07-02T12:20:04.383 回答