Loading image not showing while loading html

Question

I am trying to show a loading image before HTML content loads, but it's not appearing before the HTML loads for some reason:

You can see it in action here: http://www.machinas.com/wip/esprit/games/2013_Spring_game/html/

click Play >>> Start the game... this then loads in the 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);
                };

        }); 
    });

Dunhamzzz · Accepted Answer · 2013-02-20 11:58:18Z

1

The second argument you post to .load() is the callback, which is executed after the content has loaded. You simply need to move the loading image logic before you call .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);
                };

        }); 
    });

answered Feb 20, 2013 at 11:58

Dunhamzzz

14.8k4 gold badges54 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dunhamzzz Over a year ago

In that case I'd remove the display:none to the loading image to make sure it is appearing where you think it should. It could be hidden or the image not loading for whatever reason. Or even it's loading so quickly you don't notice it.

Collectives™ on Stack Overflow

Loading image not showing while loading html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related