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