将 CSS 精灵用于“幻灯片”元素

Using CSS Sprites for 'slideshow' elements?

本文关键字：幻灯片 元素 用于 CSS 精灵      更新时间：2023-09-26

在网页上有一个带有一些广告的块（大约3-4张图片的幻灯片）。图像不是从数据库或类似的东西加载的 - 它们是静态的。图像应该自我改变。

我有 2 个想法来做到这一点：

  1. 通过new Image()在JS中预加载图像。并通过更改src属性进行切换
  2. 将此图像合并为 1 个子画面并更改图像的背景位置

什么方法更快更好？

附言我以第二种方式看到负面部分，如果需要更改或添加图片 - 应该重新制作整个精灵。

精灵对于许多较小的图像是有益的，可以节省http请求的数量，因为它有一些开销。如果您打算显示大型JPG/PNG，那么您应该考虑，如果它们处于精灵模式，则用户必须预先下载所有图像，如果它们被拆分，他们将能够看到第一个图像，而您在后台加载其他图像。

选项 2 更适合不经常更改的内容，例如导航元素。如果这些经常变化，我会说选择选项 1，因为您提到的缺点。

编辑：

实际上，您可以使用/创建一个图像旋转器，该旋转器读取某个目录中的所有图像文件并自动旋转它们。这可能是最简单的维护。

正如您在后记中建议的那样，选项 2 对于维护来说较差。将精灵用于不经常更改的内容（即设计元素）更容易，特别是对于按钮和图标等小元素，将其包含在单个图像中更有效。

如果你使用的是jQuery，有几个插件可以很好地处理图像过渡。我推荐的一个是jquery Cycle与缓动插件相结合

我会选择第二种方式和一些像 http://css.spritegen.com/这样的网站为我做精灵。

如果你已经在你的网站上使用了JavaScript库，比如jQuery，你可以使用一个流行的插件，如jQuery Cycle，轻松地完成这个任务。

好处是，您将获得易于维护的标记，并且不必[必然]担心预加载图像或处理复杂的CSS精灵。另外，向幻灯片添加更多图像只是向HTML添加更多<img />标签的问题。

标记的工作示例如下所示：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery Cycle Basic Demo</title>
    <style type="text/css">
        #slideshow { height: 200px; width: 200px; overflow: hidden; }
    </style>
</head>
<body>
<div id="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" alt="" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" alt="" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" alt="" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script>
    $('#slideshow').cycle({
        next: '#next',
        prev: '#prev',
        speed: 750,
        timeout: 3000
    });
</script>
</body>
</html>
相关文章：