How can I check if a background image is loaded?

Question

I want to set a background image on the body tag, then run some code - like this:

$(\'body\').css(\'background-image\',\'http://picture.de/image.png\').load(         


        

Answer 1

Here is a small plugin I made to allow you to do exactly this, it also works on multiple background images and multiple elements:

Read the article:

http://catmull.uk/code-lab/background-image-loaded/

or go straight to the plugin code:

http://catmull.uk/downloads/bg-loaded/bg-loaded.js

So just include the plugin and then call it on the element:

Obviously download the plugin and store it on your own hosting.

By default it adds an additional "bg-loaded" class to each matched element once the background is loaded but you can easily change that by passing it a different function like this:

Here is a codepen demonstrating it working.

http://codepen.io/catmull/pen/Lfcpb