不要顯示，直到背景圖像完全加載

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