jquery - 加载html时加载图像不显示

Question

我试图在 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;
}

查询：

$('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);
                };

        }); 
    });

Answer 1

您发布的第二个参数.load()是回调，它在内容加载后执行。您只需在调用之前移动加载图像逻辑.load()。

$('body').on('click', '.mch-ajax', function(e){
        e.preventDefault();
        $('#mch-overlay').fadeOut(300);
        $("#loading-image").show();
        $( ".content" ).load("game.html", function() {
                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);
                };

        }); 
    });