在完全加载背景图像之前不要显示

Question

我正在将带有Ajax的外部html加载到页面中，这个外部图像有一个大的背景图像，我希望显示加载的gif，直到背景图像完全加载，这可能吗？

你可以看到我在这里工作的内容：

点击播放＆gt;＆gt;＆gt;开始游戏。

您将看到加载地图的背景图片。

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