使用CSS Sprites'幻灯片'元素？
[英]Using CSS Sprites for 'slideshow' elements?
问题描述
On web page there is a block with some advertise (slideshow of about 3-4 images). 
在网页上有一个块有一些广告（约3-4张图片的幻灯片）。 Images are not loaded from database or something like this - they are static. 图像不是从数据库或类似的东西加载的 - 它们是静态的。 Images should change themselves. 图像应该改变自己。
I have to 2 ideas for doing this: 我有2个想法这样做：
- Preloading images in JS by
new Image().通过new Image()在JS中预加载图像。 And switching by changingsrcattribute并通过更改src属性进行切换 - Joining this images into 1 sprite and changing background-position of image 将这些图像加入1个精灵并改变图像的背景位置
What way is faster and better? 什么方式更快更好？
PS I see negative part in second way, that if it's needed to change or add a picture - whole sprite should be remade. PS我在第二种方式看到负面部分，如果需要更改或添加图片 - 应该重新制作整个精灵。
5 个解决方案
解决方案1
3 已采纳 2011-05-13 20:11:24
Sprites are beneficial for a lot of smaller images to save on amount of http requests as there is some overhead to it. 精灵对于许多较小的图像是有益的，以节省http请求的数量，因为它有一些开销。 If you're planning on displaying large JPGs/PNGs then you should consider that the user will have to download all the images upfront if they are in sprite mode, where as if they are split they will be able to see the first image while you load the other ones in the background. 如果您计划显示大型JPG / PNG，那么您应该考虑用户必须提前下载所有图像（如果它们处于精灵模式），就像它们被分割一样，它们将能够在您看到第一张图像时在后台加载其他的。
解决方案2
1 2011-05-13 20:09:59
Option 2 is better for things that don't change often, such as nav elements. 对于不经常更改的内容，例如nav元素，选项2更好。 If these change often, I would say go with option 1 because of the drawback that you mentioned. 如果这些经常变化，我会说选择1，因为你提到的缺点。
EDIT: 编辑：
In fact, you could use/create an image rotator that reads all the image files in a certain directory and rotates them automatically. 实际上，您可以使用/创建一个图像旋转器来读取某个目录中的所有图像文件并自动旋转它们。 That would probably make for the easiest maintenance. 这可能会使最简单的维护。
解决方案3
1 2011-05-13 20:12:19
As you suggested in your postscript, option 2 is inferior for maintenance. 正如您在附言中所建议的那样，选项2不如维护。 It's easier to use sprites for things that don't change often (ie design elements) and in particular for small elements such as buttons and icons for which it's more efficient to include in a single image. 对于不经常更改的东西（即设计元素）使用精灵更容易，特别是对于包含在单个图像中更有效的按钮和图标等小元素。
If you are using jQuery, there are several plugins that handle image transitions very well. 如果你使用jQuery，有几个插件可以很好地处理图像转换。 One that I would recommend is jquery Cycle in combination with the Easing plugin 我建议的一个是jquery Cycle和Easing插件
解决方案4
0 2011-05-13 20:09:35
我将选择第二种方式和http://css.spritegen.com/等网站为我做精灵。
解决方案5
0 2011-05-13 20:39:01
If you're already using a JavaScript library on your site, such as jQuery , you can accomplish this with ease using a popular plugin like jQuery Cycle . 如果您已经在您的站点上使用JavaScript库，例如jQuery ，您可以使用像jQuery Cycle这样的流行插件轻松完成此任务。
As a benefit, you'll get easy-to-maintain markup and don't have to [necessarily] worry about pre-loading images or dealing with complex CSS Sprites. 作为一个好处，您将获得易于维护的标记，并且不必[担心]预先加载图像或处理复杂的CSS Sprites。 Plus, adding more images to the slideshow is just a matter of adding more <img /> tags to the HTML. 此外，向幻灯片添加更多图像只需在HTML中添加更多<img />标记即可。
A working example of the markup can be seen below: 标记的工作示例如下所示：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.