Как устроить preloader таким образом, чтобы он появлялся тогда, когда только начинает грузится другая страница?

Question

[Nikolay Matyushkin]

Всем привет, сразу извиняюсь, если не понимаю чего-то элементарного. Перебрал кучу способов сделать Preloader, но везде одна и та же проблема: когда я загружаю страницу, preloader буквально на мгновение появляется тогда, когда страница уже подгрузилась, т.е. есть у меня на сайте страница, куда приходит json запрос с расписанием. Само собой переходя на эту страничку её загрузка значительно дольше происходит, нежели у других. Так вот проблема в том, что добавив preloader, я захожу на эту нагруженную страницу, всё как обычно, идёт браузерная шкала загрузки, затем переход на запрашиваемую страницу, срабатывает прелоадер и пропадает. Мне нужно, чтобы он срабатывал уже тогда, когда я нажал ссылку. Ну, как-то так. Ниже прилагается код.

Это добавляется сразу после body

<div id= "p_prldr"><div class =" contpre"><span class="svg_ anm"></span>< br>Подождите<br ><small>идет загрузка</small></div></div>

Это в style.css

#p_prldr{
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
background: #9A12B3;
z-index: 30;}
 
.contpre small{font-size:25px;}
 
.contpre{
width: 250px;
height: 100px;
position: absolute;
left: 50%;top: 48%;
margin-left:-125px;
margin-top:-75px;
color:#fff;
font-size:40px;
letter-spacing:-2px;
text-align:center;
line-height:35px;}
 
#p_prldr .svg_anm {
position: absolute;
width: 41px;
height: 41px;
background: url(images/oval.svg) center center no-repeat;
background-size:41px;    
margin: -16px 0 0 -16px;}

Это...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

и это добавляются в head

<script type="text/javascript">$(window).on('load', function () {
    var $preloader = $('#p_prldr'),
        $svg_anm   = $preloader.find('.svg_anm');
    $svg_anm.fadeOut();
    $preloader.delay(500).fadeOut('slow');
});</script>

Ссылка

Answer 1

[zxscv]

Грузи json по ajax, либо грузи уже готовый html расписания по ajax

var myfunction = function() {
$('#p_prldr').show();
$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
  $('#p_prldr').hide();
});
}