Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preload background image

Tags:

People also ask

How do I preload a background image in CSS?

Preloading background images using image-set # If you have different background images for different screen densities, you can specify them in your CSS with the image-set syntax. The browser can then choose which one to display based on the screen's DPR. background-image: image-set( "cat. png" 1x, "cat-2x.

What is image preloading?

"Preloading" loads an image file into the users' computer memory so that it can be instantly accessed when needed. This is useful, for example, if you have a mouseover event and an image needs to change without any delay.

Can you lazy load a background image?

You can still lazy load background images if they're in HTML as an inline style. Plugins like FlyingPress automatically detect and lazy load them.


There's tons of articles of how to preload an image, however I can't seem to find anything useful about preloading a background image with jquery.

I made a simple html mockup of what I'd like to achieve: http://jsfiddle.net/3rfhr/

  • A loading div appears
  • Background is loaded
  • Loading div disappears
  • Background DIV appear

I can handle the div transitions but I'm clueless as to how I should go about preloading a css background. Thanks for reading my question :)