Comments on: Even better image preloading with CSS2

By: Bas

Bas — Sat, 08 Oct 2011 15:44:36 +0000

Thanks this is also very useful for websites with changing background images.

By: Donny

Donny — Wed, 04 May 2011 23:01:51 +0000

Using this on my portfolio site (crediting CSS Ninja in the CSS file, of course) and it’s great. Only bit of oddness is that when I nav away from the home page, then back again, the “Loading” image/text reappear briefly.

By: Zenta

Zenta — Wed, 20 Apr 2011 23:12:22 +0000

Works like a charm. Elegant solution. Thank you for posting this.

By: DrCord

DrCord — Wed, 23 Feb 2011 17:22:08 +0000

Great preloader! Easy to implement and works like a charm…thanks!

By: rebecca

rebecca — Thu, 17 Feb 2011 19:57:17 +0000

Thank you so much for this. I do a lot of sites for artists so large images. This technique has really made a difference to how they look. Very much appreciated.

By: CSS İpucu 29: CSS ile Önden Resim Yükleme Teknikleri | M.Selman Ay

CSS İpucu 29: CSS ile Önden Resim Yükleme Teknikleri | M.Selman Ay — Sat, 05 Feb 2011 05:02:57 +0000

[...] http://www.thecssninja.com/css/even-better-image-preloading-with-css2 [...]

By: The Css Ninja

The Css Ninja — Thu, 13 Jan 2011 01:58:29 +0000

@kn33ch41 – I’m getting the same behaviour now too. Thanks for the through follow up.

By: kn33ch41

kn33ch41 — Fri, 07 Jan 2011 00:46:40 +0000

@TheCSSNinja

After an hour of troubleshooting I discovered a quirk in Webkit regarding this difference in our results. The below solution works in both Chrome 10 and Safari 5.0.3.

On Firefox and Opera if you define a background image on an element and set “display:none” to that very element, the image will not download. However, if you do this with Webkit, the image will still download. In order to prevent the image from being downloaded in Webkit, Webkit requires that one of the *parent* elements of the element with the background image be set to “display:none.”

I hadn’t realized that this was occurring on my site by default, because I was never explicitly setting “display:none” on those decorative image elements, but always on one of their parent elements.

It would appear, then, that the best way to preserve the most reliable, cross-browser behavior would be to set “display:none” on one of the parent elements of any given element with a defined background image. I’d be curious to see if you can duplicate these results; I’m confident you’ll be able to. It’s a handy tidbit of knowledge to have actually framed and defined, instead of being unaware of this subtle difference between browsers.

Extra:

IE is the only browser that does not suppress the download request, given the described usage.

By: The Css Ninja

The Css Ninja — Thu, 06 Jan 2011 04:02:08 +0000

@kn33ch41 – I’m still getting background images downloading even when the element is hidden in Safari and Chrome. Are you using media queries to detect viewport size?

By: kn33ch41

kn33ch41 — Wed, 05 Jan 2011 06:55:25 +0000

@TheCSSNinja

My results with Safari 5.0.3 and Chrome 10.0 don’t follow with yours regarding the download of background images and the display property set to none.

For several months I’ve defined certain decorative images (user profile pictures) on a site as background images instead of using the HTML img tag. I do this because when the viewport is small and assumed to be a mobile device they are set to “display: none” to avoid the download and request overhead. It works as intended in all browsers. The reason I delegated certain images to CSS to be rendered as background images is because setting “display: none” on HTML img tags does not prevent the resource from being downloaded.