Preloading CSS Images

by

Preloading images using CSS only

In the below code I am randomly choosing the body element, since it is one of the only elements guaranteed to exist on the page.

For the “trick” to work, we shall use the content property which comfortably allows setting multiple URLs to be loaded, but as shown, the ::after pseudo element is kept hidden so the images won’t be rendered:

body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images
   content:url(img1.png) url(img2.png) url(img3.gif) url(img4.jpg);   // load images
}

enter image description here

Demo

it’s better to use a sprite image to reduce http requests…(if there are many relatively small sized images) and make sure the images are hosted where HTTP2 is used.

More Related Contents:

  1. Greyscale Background Css Images
  2. Cross browser way to rotate image using CSS?
  3. Center multiple images horizontally in CSS
  4. Browser can’t access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
  5. SVG data image not working as a background-image in a pseudo element
  6. CSS3 background image transition
  7. CSS force image resize and keep aspect ratio
  8. How to get div height to auto-adjust to background size?
  9. CSS Image size, how to fill, but not stretch?
  10. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  11. How to vertically align an image inside a div
  12. How can I resize an image dynamically with CSS as the browser width/height changes?
  13. Drop shadow for PNG image in CSS
  14. Gradients in Internet Explorer 9
  15. draw diagonal lines in div background with CSS
  16. Why does the linear-gradient disappear when I make an element position:absolute?
  17. Replacing H1 text with a logo image: best method for SEO and accessibility?
  18. How to put an image in div with CSS?
  19. Responsive Images with CSS
  20. CSS Background image not loading
  21. How to center a (background) image within a div?
  22. div background color, to change onhover
  23. Define an ‘s src attribute in CSS [duplicate]
  24. vertical-align image in div [duplicate]
  25. How to vertically align an image inside a div
  26. How to use images in css with Webpack
  27. Fixed gradient background with css
  28. Firefox blurs an image when scaled through external CSS or inline style.
  29. Print styles: How to ensure image doesn’t span a page break
  30. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

Leave a Comment