jquery - Don't display until background image is fully loaded -

jquery - Don't display until background image is fully loaded -

i'm loading in external html ajax page, external image has big background image , i'd loading gif display until background image has loaded, possible?

you can seee i'm working on here:

click on play >>> start game.

you'll see background image of map loading in.

my jquery code @ moment follows:

$(document).bind('ajaxstart', function(){ $('#loading-image').show(); }).bind('ajaxstop', function(){ $('#loading-image').hide(); }); $('body').on('click', '.mch-ajax', function(e){ e.preventdefault(); $('#mch-overlay').fadeout(300); $("#loading-image").show(); $( ".content" ).load("game.html", function() { $("#loading-image").hide(); }); });

thanks!

you can observe load of image so,

var mybackgroundimage = new image(); mybackgroundimage.src = "/{image path}"; mybackgroundimage.onload = function () { //now ever need image loaded };

jquery ajax