1
我試圖顯示HTML內容加載之前加載圖像,但它不是HTML加載之前出現由於某些原因:加載圖像不顯示在加載HTML
你可以看到它在這裏的行動: http://www.machinas.com/wip/esprit/games/2013_Spring_game/html/
點擊播放>>>開始遊戲...然後加載到HTML中。
HTML
<div id="loading-image"></div>
CSS
#loading-image{
background:url(../img/ajax-loader.gif) no-repeat 0 0;
position:absolute;
top:50%;
left:50%;
width:16px;
height:16px;
margin-left:-8px;
display:none;
}
JQUERY:
$('body').on('click', '.mch-ajax', function(e){
e.preventDefault();
$('#mch-overlay').fadeOut(300);
$(".content").load("game.html", function() {
$("#loading-image").show();
var myBackgroundImage = new Image();
myBackgroundImage.src = "http://www.machinas.com/wip/esprit/games/2013_Spring_game/html/img/bg-map.png";
myBackgroundImage.onload = function() {
$("#loading-image").hide();
$(".map").fadeIn(300);
$(".note").delay(400).fadeIn(700);
$(".route").delay(800).fadeIn(700);
$(".start-btn").delay(1200).fadeIn(700);
};
});
});
,不能正常工作,我 – user1937021 2013-02-20 11:59:06
嘗試過在那種情況下,我會刪除'顯示:none'到裝載圖像,以確保它的出現,你認爲它應該。它可能是隱藏的或圖像無法加載的原因。或者即使它很快加載,你都沒有注意到它。 – Dunhamzzz 2013-02-20 12:01:48