Question

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

我有两个想法：

通过new Image()在JS中预加载图像。并通过更改src属性
将此图像合并为1个精灵并更改图像的背景位置

哪种方式更快更好？

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

Answer 1

Sprites对于许多较小的图像是有益的，以节省http请求的数量，因为它有一些开销。如果您计划显示大型JPG / PNG，那么您应该考虑用户必须提前下载所有图像（如果它们处于精灵模式），就像它们被分割一样，它们将能够在您看到第一张图像时在后台加载其他的。

Answer 2

选项2更适用于不经常更改的内容，例如nav元素。如果这些经常发生变化，我会说选择1，因为你提到的缺点。

编辑：

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

Answer 3

正如您在附言中所建议的那样，选项2不如维护。对于不经常改变的事物（即设计元素）使用精灵更容易，特别是对于按钮和图标这样的小元素，更有效地包含在单个图像中。

如果你正在使用jQuery，有几个插件可以很好地处理图像转换。我建议将jquery Cycle与Easing plugin

结合使用

Answer 4

我会选择第二种方式和某些网站http://css.spritegen.com/来为我做精灵。

Answer 5

如果您已在自己的网站上使用JavaScript库，例如jQuery，则可以使用像jQuery Cycle这样的流行插件轻松完成此操作。

作为一个好处，您将获得易于维护的标记，并且不必 [必须] 担心预加载图像或处理复杂的CSS Sprites。此外，在幻灯片中添加更多图片只需向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>

使用CSS Sprites'幻灯片'元素？

5 个答案: