我应该为 jQuery 滑块使用精灵吗？答案

【问题标题】：Should I be using sprites for jQuery Sliders?我应该为 jQuery 滑块使用精灵吗？
【发布时间】：2013-03-05 00:55:09
【问题描述】：

我知道使用 sprite 可以节省 HTTP 请求，从而加快页面加载速度。

这与 jQuery 滑块有什么关系？ jQuery 滑块是在页面加载时加载所有图像还是根据需要加载它们？是否可以/推荐为 jQuery 滑块使用精灵？

如果有人想知道，我使用的滑块是：https://github.com/maelstrom/SecretSource

基本的 HTML：

             <div id="banner-fade" class="responsive-container img-polaroid">
                <ul class="slideshow">
                  <li><img src="img/slider/image1.jpg" alt=""></li>
                  <li><img src="img/slider/image2.jpg" alt=""></li>
                  <li><img src="img/slider/image3.jpg" alt=""></li>
                </ul>
             </div>

【问题讨论】：

对我来说，我不太确定这是否有帮助，因为它会使您的图像在首次访问时加载速度较慢，并使您的访问者在您的站点中消失，只需简单地自定义图像的大小以更快地加载。

标签： jquery html css performance css-sprites

【解决方案1】：

它与 jQuery Sliders 无关，您的 HTML 中的所有图像都将被获取。因此，如果您使用精灵，您将对三个图像发出一个请求，而不是三个单独的请求。是否可以？是的。受到推崇的？可能，您是否想尽量减少 HTTP 请求并让 HTML 稍微难一些，因为您现在必须定位图像？

请务必记住，通过制作精灵，您不能并行下载单独的图像。

最后，没有人能告诉你总是以一种方式做事，你需要权衡利弊。在这种情况下，我会将这三个图像放入一个 sprite 中以节省网络连接，但其他人可能更喜欢并行下载的好处。

【讨论】：

如果您的目标是拥有一个快速的网站，提供出色的用户体验，您会将所有图像放在一个大图像中并放置您需要的所有内容，或者这是一个坏主意，因为我不这样做还不明白？
试图将所有图像维护到一个精灵中可能是维护的噩梦。您也不希望强制用户预先加载所有图像（以全局图像精灵的形式）。您必须取得平衡，将组合在一起的图像放在一个精灵中。你不想要一个请求，但你也不想要太多。
太好了，感谢您的帮助。我没有意识到可以同时并行下载多个元素。这似乎比全局精灵更快，而且更容易。
会，但如果您在启动页面时请求 50 张图片，它可能会开始伤害您，因为并行请求的数量是有限的。
我相信我正在处理的页面最多会有 3 或 4 个图像请求。我已经有一些用于较小图像和按钮的精灵，并且我有两个滑块。我将（尝试）按照您的建议为每个滑块创建一个精灵。