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

Question

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

你可以在这里看到我正在做的事情：

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

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

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