1

我有一个 ASHX 处理程序，用于显示存储在数据库中的图像。我将图像显示为缩略图，然后如果用户将鼠标悬停在它们上方，则显示为全尺寸。

如何在运行时组合图像以生成在这种情况下使用的 CSS 精灵？

如果可以做到，有人对从哪里开始有建议吗？

更新

似乎大多数人都说这不是使用精灵的好情况。我是精灵概念的新手，所以请多多包涵。

如果我每次都要从我的数据库中的页面上加载 30 个缩略图，为什么将它们作为一个大图像从服务器传递到客户端而不是传递 30 个单独的图像没有意义呢？这不是更快吗？这不是 CSS Sprites 的目的吗？

4

5 回答 5

2

对浏览器而言，HTTP资源就是HTTP资源，如果服务器通过从硬盘读取文件、从数据库中取出数据、或者通过通过一种可以输出有效 PNG 数据的算法。

您只需要照常从数据中生成图像。

也就是说，由于图像是内容，CSS 将不适合将它们包含在文档中。你应该使用一个<img>元素。

于 2010-07-13T22:57:39.060 回答
1

你有几个选择。

  1. 您的处理程序可以动态组合从数据库中获取的图像并将整个图像发送到浏览器。

或者（我更喜欢这个）

  1. 您在将图像上传到您的站点时创建合并图像。

第二个更好，因为转换只需发生一次，因此意味着您只需花费这些资源一次。这确实意味着您实际上是在存储图像的 2 个副本，但这很好。

更新

我相信我误解了你试图做的事情。我以为您正在尝试将缩略图与完整的图像结合起来。相反，您似乎真的在问如何组合所有缩略图。

在这种情况下，它甚至是一个坏主意。正如 David Dorward 所说，CSS 用于控制布局。你说的是内容。但是，抛开语义问题不谈，如果您想对布局进行调整，您将不得不修改创建精灵的代码。如果您决定制作 35 张图像怎么办？或者，将其更改为 18？

通过走精灵路线，您被迫修改任何布局更改的代码，这使您非常糟糕，这不是好的样式。

为了解决最后一个问题：它不是更快吗？可能不是。在这种情况下，您必须动态创建精灵，这会引入服务器开销，从而减慢一切速度。最多可能是交货时间的清洗。在最坏的情况下，您会招致大型服务器和开发性能的负面影响。

于 2010-07-13T23:06:54.363 回答
1

查看http://www.RequestReduce.com。它不仅自动创建 sprite 文件，而且还通过 HttpModule 以及合并和缩小所有 CSS 即时完成。它还使用量化和无损压缩优化 sprite 图像，并使用 ETags 和 Expires 标头处理生成文件的服务，以确保最佳浏览器缓存。设置很简单，只涉及一个简单的 web.config 更改。请参阅我的博客文章，了解 Microsoft Visual Studio 和 MSDN 示例库对它的采用。

于 2011-09-11T07:12:20.120 回答
0

我完全同意大卫的观点。关于大卫最后一点的快速说明：只有图像是内容时。但是，如果它们是布局的一部分，那么 CSS 将是合适的。

也就是说，对于这个用例，精灵不是一个好的选择。缩略图的目的之一是减少加载时间，精灵会使画廊变得更糟。更好的模式可能是使用灯箱或类似的东西，其中包含两个图像而不是一个，按需请求更大的图像。

于 2010-07-13T23:04:15.813 回答
0

精灵在这里不是一个好的解决方案。

为了回答您的更新，精灵是许多小图像的理想选择，其中新 HTTP 请求的开销超过了为小 png 或 gif 发送的几个字节（例如 16x16 图标等）。对于较大的图像，随着下载时间的增加，HTTP 请求的时间总体上变得不那么重要了。

将图像打包成一个精灵也意味着它们将执行一个更长的请求，而其他请求将不得不在它后面排队。如果重要的是让缩略图快速显示，那么在开始加载相同图像的任何更大视图之前，请确保先加载这些缩略图。

任何在初始页面加载时未显示的较大文件都应延迟加载（window.onload）或延迟加载（根据单击或悬停操作的需要）。

于 2010-07-14T00:12:39.737 回答