Using CSS Sprites for 'slideshow' elements?
On web page there is a block with some advertise (slideshow of about 3-4 images). 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:
- Preloading images in JS by
new Image(). And switching by changingsrcattribute - Joining this images into 1 sprite and changing background-position of image
What way is faster and better?
P.S. I see ne开发者_开发问答gative part in second way, that if it's needed to change or add a picture - whole sprite should be remade.
Sprites are beneficial for a lot of smaller images to save on amount of http requests as there is some overhead to it. 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.
Option 2 is better for things that don't change often, such as nav elements. If these change often, I would say go with option 1 because of the drawback that you mentioned.
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.
As you suggested in your postscript, option 2 is inferior for maintenance. It's easier to use sprites for things that don't change often (i.e. 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. One that I would recommend is jquery Cycle in combination with the Easing plugin
I will choose the second way and some site like http://css.spritegen.com/ to do the sprite for me.
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.
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. Plus, adding more images to the slideshow is just a matter of adding more <img /> tags to the HTML.
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>
加载中,请稍侯......
精彩评论