javascript - Function firing before images has finished loading -

i'm trying pre loader screen work hitting roadblock.

my goal: have loading animation/divs dissapear when image has finished loading.

i've tried accomplish simple .ready function , still function removes loading animation fires white image still loading , viewer see image load in real time.

$("#defaultimage").ready(function(){   tweenmax.to(["#backgroundload","#loadboxes"],1,{alpha:0,delay:0.75});   console.log('page has loaded');  }); 

is incorrect? thought wait entire page(images included) load , fire function inside it.

i've tried below , doesn't seem fire console.log @ all

document.getelementbyid("defaultimage").onload = function (){   console.log('page has loaded');  }; 

pen in question below. can see issue if view in debug view , hard refresh. http://codepen.io/mhcreative/pen/goxlpo?editors=0011

any appreciated.

thanks, all.

here try if still want natively.

$(document).ready(function(){     var img = new image();   // create new img element     img.addeventlistener("load", function() {      tweenmax.to(["#backgroundload","#loadboxes"],1,{alpha:0,delay:0.75});     }, false);     img.src = 'src/to/img'; // set source path     $("#defaultimage").append(img); //append loaded image inside div });