不要显示，直到背景图像完全加载

Question

我正在加载外部html与Ajax到一个页面，这个外部图像有一个大的背景图像，我想加载gif显示，直到背景图像满载，这可能吗？

可以SEEE什么我正在这里：

点击播放>>>开始游戏。

你会看到地图加载的背景图像的时刻

我的jQuery代码如下：。

$(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(); 
     }); 
    }); 

谢谢！

Answer 1

您可以检测像这样的图像的负荷，

var myBackgroundImage = new Image(); 
myBackgroundImage.src = "/{Image Path}";  

myBackgroundImage.onload = function() { 
    //Now do what ever you need to as the image is loaded 
};