Categories
Development

Stylehive

Stylehive is using a css style that loads an image placeholder. That way the page doesn’t look blank while the images are loading. Great idea.

img.potential_error_image {
background-image: url('../../images/broken-image.png');
background-repeat: no-repeat;
background-position: 10px 10px;
background-color: white;
}

By Chris Tingom

Principal of Tornado Design, a Phoenix, AZ based web consultancy

6 replies on “Stylehive”

From what I’ve seen, background images seem to load only after all inline code and images have loaded.

So this technique appears to be designed to provide a background for images that have failed to load–the class name implies this too.

Though after the image is cached, maybe it does work as a loading image background.

From what I’ve seen, background images seem to load only after all inline code and images have loaded.

So this technique appears to be designed to provide a background for images that have failed to load–the class name implies this too.

Though after the image is cached, maybe it does work as a loading image background.

yeah, I think once the loading image is cached you may get some effect there. That and the fact that the main images are probably large. There wouldn’t be a huge effect if the main image was small.

Not working very well in Firefox, it automaticlly shows a border around the image until the image starts loading.

And like say before, the images are loaded before the backgrounds, though placing the ‘broken-image.png’ first thing after the body-tag and hidding it, might do the trick.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.