Check if a background image is loaded, Responsive Edition

Question

I have set a background image to the body tag (large pic) and I want to fade it in once loaded (since the image is large, it would roll in when loading).

I have seen this answer that basically uses a hidden img tag and leverage the browser cache: How can I check if a background image is loaded?

This is great for a fixed-layout website, but what about a responsive site? I don't want to load all 3 background images at the same time, but I'd want to be able to select the one that has to be loaded in the hidden img tag.

See site here: http://jll.is

Thanks,

Answer 1

First apply opacity:0 to the image, this will prevent it from being showed. And put your fade in effect using jquery like this

$('#imgid').load(function(){

Fade in effect

});