Animate opacity on image load

Question

I have tried a bunch of different solutions to similar problems on here but none of them seem to be doing anything for me. See my jsFiddle to see an example of what I would like to happen: http://jsfiddle.net/Amp3rsand/HSNY5/6/

It animates how I would like but it relies on .delay when I would prefer it to fire as soon as the image is finished loading. The commented out sections in the js are the things that I have tried.

Could the problem be that the image is actually the background of a div rather than its own element? I tested making it its own <img> tag as well but it didn't seem to make a difference. I have the image as the background so that when I use media queries it is easy to swap in a different, smaller image for mobile users or small screens.

HTML:

<header></header>
<div id="image">
    <div id="blah"></div>
</div>

The image I would like to fire after it finishes loading is the background of '#image'. Then I would like for it to animate to 'opacity:1;' while '#blah' and 'header' are animated into place.

Here is the jQuery I'm using right now but it is not correct:

$('#image').hide().delay(800).fadeTo(600, 1);
$('#blah').css("left", "-650px").delay(1400).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(2000).animate({top:'-5px'},400);

On my website it is quite a large image so it takes about half a second to load but this code doesn't take into account caching or different network speeds.

What am I doing wrong or what should I do differently?

Thanks everyone

---

EDIT:

I gave the imagesLoaded plugin a go earlier and it seems to work on my website but I can't tell if it is actually doing what I want or just emulating my code from above.

$(document).ready(function() {
    $('body').hide().fadeTo(500, 1)
});
imagesLoaded( document.querySelector('#homeimg'), function( instance ) {
  $('article').hide().fadeTo(600, 1);
  $('#caption').css("left", "-650px").delay(800).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(1400).animate({top:'-5px'},400);
});

'#homeimg' being the div with the image as the background and 'article' being the container for '#homeimg' and '#caption'

I can only test with the website loaded locally at the moment so I can't simulate a slow connection. Does the code above do what I am looking for? Sorry if it should be obvious

Answer 1

Your image is loaded via a CSS background property, you will not be able to detect the loading of that. Why not use <img> tag for images?

If you use <img> you can read this question: Browser-independent way to detect when image has been loaded for a bullet-proof solution.

If you insist on using a background CSS property you will need to implement a way of sending your image as a data url encoded as base64 as described in this answer: https://stackoverflow.com/a/13989806/2788