jquery - Initiate css animation once background image of div is loaded. -

i want make sure background image of text animation take place loaded before starts. doesn't have check if background images or images on page loaded, specific one, animation doesn't take place on body's background.

image loaded data attribute via parallax script.

i have tried add image inside load function, doesn't seem load @ all.

all of inside document ready.

html:

<div id="mydiv" class="parallax-window" data-parallax="scroll" data-image-src="http://s27.postimg.org/ya4yhbmzn/image_example1.jpg">      <h1>first title</h1>     <h2>second title</h2>      </div> 

css:

#mydiv{     width: 100%;     padding: 80px 0;     text-align: center; }  h1, h2{      opacity: 0;  } 

javascript not working:

$(window).load(function(){     $('#mydiv').attr('data-image-src', 'http://s27.postimg.org/ya4yhbmzn/image_example1.jpg').load(function() {      $('h1').css('opacity',1).addclass('slideindown').css('opacity',1);      settimeout(function() {$('h2').addclass('slideinup').css('opacity',1);}, 1000);      }); }); 

javascript works (but images load delays , animation takes place):

$(window).load(function(){      $('h1').css('opacity',1).addclass('slideindown').css('opacity',1);      settimeout(function() {$('h2').addclass('slideinup').css('opacity',1);}, 1000);  }); 

fiddle show working example , code tried use check if background image has been loaded.

thank provided.

you can use javascript image object load image , append dom. example:

var imgobj = new image();  imgobj.src = "http://s27.postimg.org/ya4yhbmzn/image_example1.jpg";  imgobj.onload = function() {    $('#mydiv').attr('data-image-src', this.src);     //here can initiate animation }