Neat CSS3 trick to avoid that "still loading" flash...

Datetime:2016-08-23 03:05:15          Topic: CSS3           Share

Have you noticed how when you hover the mouse over certain buttons, they flash? This is because the button is made of two images. One when you do not hover it and one when you do hover it.

The basic CSS generally makes use of a background with a URL to an image:

.button
{
  background: url(images/button.png) no-repeat 0 0;
}
.button:hover
{
  background: url(images/button-bright.png) no-repeat 0 0;
}

This works great. When you hover you see the bright button. That a really nice effect. Only, the client has to load that button in their browser and most often, there is a flash because between the time you start hovering that button and the time the load completes, the CSS pretty much says: display nothing.

CSS 3.x added a new feature to backgrounds. You may define more than one background per item. This is particularly useful to create all sorts of effects, such as having gradients over an image.

In our situation, this means we can continue to show the non-hovered background until the hovered one gets loaded.

.button
{
  background: url(images/button.png) no-repeat 0 0;
}
.button:hover
{
  background: url(images/button-bright.png) no-repeat 0 0,
     url(images/button.png) no-repeat 0 0;
}

Here the hover shows the normal "images/button.png" until the "images/button-bright.png" get loaded and then renders that bright version on top. No flash at all.

I think this should be used with all the buttons out there. It is a really neat trick.





About List