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;
}
6 responses to “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.
Good points.
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.
Saw the same technics applied here: http://www.smallestphoto.com/dt/2006-05-21