CSS Sprites - algo más que "el desempeño amigable" con el plugin de jQuery spritely

Sprites CSS se utilizan en el diseño de "normal" web a una variedad de secuencias de imágenes para utilizar el rendimiento de usar.

Una aplicación típica es un cambio de gráficos con el "mouse".

Una posibilidad sería que aquí en cada estado (de un ratón y el puntero del ratón sobre) cada una para producir un archivo de gráficos y definir el cambio a través del código CSS. El uso de este método es necesario cargar dos archivos físicos del servidor web a través de peticiones http - no tan grande para el rendimiento.

Con el uso de sprites CSS son secuencias de imágenes en un archivo o de lado colocados uno junto al otro y el cambio de imagen de cambio se define a través de CSS (imagen de fondo). ¿Qué parte de la secuencia de imágenes se muestra es determinado por el atributo CSS "background-position". En esta variante es sólo un archivo físico a través de carga de peticiones http y por lo tanto el rendimiento es amigable.

En el ejemplo anterior, sólo hubo dos secuencias de imágenes. Los sprites son realmente eficaces si se trata de una secuencia completa de imágenes - similar a un libro animado - es (por ejemplo, un pájaro revoloteando, una persona corriendo, etc.)

El plugin de jQuery spritely

¿Qué nuevas oportunidades de sprites CSS implica, que muestra el plugin de jQuery vivaz . Con las opciones de configuración sencilla puede ser simulado animaciones fantásticas. Una gran solución para aquellos que quieran renunciar a Flash.

Echa un vistazo a la página web absolutamente plugin! No la Möglichkietn impresionante presentado.

Otros enlaces relacionados con Sprites CSS:

• jQuery y CSS Sprite Animation explicada en 5 minutos
• CSS sprites explica fácilmente
• CSS Sprites - un rendimiento del sitio web
• CSS Sprites: Qué son, qué son Cool, y cómo usarlos
• Sprites CSS w / a cabo utilizando imágenes de fondo
• Iconos de la pantalla con una sola imagen y CSS "sprites"
• Ahorro de ancho de banda y velocidad de mejora del sitio Web mediante CSS Sprites