Pre-loading site layer and Jquery

Anyone can tell me WHAT is wrong with this code. Doesn´t work for me. I put big images (size) to test, but still not working.

Pre loading site with DIV, image pre-loading and JQUERY

On the

<script src="http://ift.tt/1rfghyb"></script>
<style>
.modal {
    display:    none;
    position:   fixed;
    z-index:    10000000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://ift.tt/V4kkSr') 
                50% 50% 
                no-repeat;
}


body.loading {
    overflow: hidden;   
}


body.loading .modal {
    display: block;
}
</style>

<script>
$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");   },
     ajaxStop: function() { $body.removeClass("loading");  }    
});


</script>

And before

<div class="modal"><!-- Place at bottom of page --></div>
</body>

via Chebli Mohamed