On Wed, Apr 10, 2013 at 2:25 PM, Alex Harui <aha...@adobe.com> wrote:
>
>
>
> On 4/10/13 12:40 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote:
>
>
> >>>
> >>> Moreover, in the separate svg files approach, the svg for a state is
> >> loaded
> >>> only when that state is triggered, which causes an obvious flicker when
> >>> loading for the first time.
> >> I think I saw the flicker, but is that not solvable? If that's the
> state
> >> of
> >> the world for svg as background-images it seems like nobody would be
> using
> >> it.
> >>
> >
> > It is not a limitation of the SVG background-images. The same flicker
> > happens when you use a .png or a .jpg as background. It seems like the
> > images are lazy loaded and I am not sure if we can force the images to be
> > loaded into memory without resorting to hacks.
> Again, we want to identify the best implementation and encapsulate it.
> Howe
> are other frameworks skinning buttons?
The widely acceptable solutions seem to be:
a) Preload the images using in an onLoad javascript function
b) Use a sprite sheet. So, it would look something like (copy-pasta from
[1]):
/* "rollover-sprite.png" file contains images for both states side by side. */
A {
background: url(rollover-sprite.png) no-repeat;}
/* Width of image for each state is supposed to be 100px here
(sprite will be ~200px wide). */A:hover {
background-position: -100px 0;}
What I am doing is a modification of the sprite sheet solution. Except
that I am toggling visibility of states instead of translating the sprite
sheet.
Again, I wouldn't want to go this route because it limits us to built in
pseudo-selectors/states. For example, we wont be able to do a three-state
checkbox (selected, unselected, partially selected) with this approach.
[1]
http://stackoverflow.com/questions/13015603/css3-background-transition-flickers-on-first-hover
