【发布时间】：2013-12-16 19:16:10
【问题描述】：
我正在使用http://fotorama.io/ 制作幻灯片，由于 # of imgs，它增加了我的页面加载时间。
Fotorama 可以从您的图像中自动生成缩略图。为了提高加载速度，我将图像组合成一个 CSS 精灵。似乎需要一个“img”标签来生成缩略图。
关于如何让它在不使用“img”标签时显示拇指有什么想法吗？
【问题讨论】：
标签： html css-sprites fotorama
【发布时间】：2013-12-16 19:16:10
【问题描述】：
这个问题可能有点老了，但here 是一个使用<div style='background: url()'> 作为拇指的小提琴。它不使用 sprites，但如果你知道如何制作 sprites，那就很简单了。只需将 .thumbs a div { background: url(myimage.jpg);} 添加到您的 CSS 并将 background-position:-30px -150px; 等添加到每个 div。
代码是从custom-thumbs 示例复制而来的，只有css 被更改为div 而不是img。
顺便说一句：感谢您向我介绍 fotorama，这基本上就是我刚刚编码的画廊。除了 css 精灵。
如果您在精灵方面需要任何帮助，我制作了一个小型 js 库和 shellscript 来为图像文件夹自动生成精灵和代码。
【讨论】：
-
我需要使用精灵，因为我有一个包含 150 张左右图像的页面。它导致我有一个可怕的页面加载时间。你能否指出我如何解决这个问题的正确方向？我必须显示所有图像。
-
图片是缩略图还是更大？缩略图可以组合成一张包含所有图像的更大图像，然后使用 CSS
background-position处理。这大大减少了请求开销。如果它们是全尺寸图像，除了将它们填充到仅 i-frame 的视频中并使用视频播放器显示它们之外，您无能为力。你还在用 Fotorama 吗？您可能应该提出一个新问题（也许给我一个 ping 的问题）。