背景图片完全加载后才显示

Question

我正在用Ajax加载一个外部html到一个页面中，这个外部图像有一个很大的背景图像，我想要显示加载gif直到背景图像完全加载，这是可能的吗？

你可以看到我在做什么：

点击play >>>开始游戏。

您将在中看到加载地图的背景图像。

目前我的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
};