Блог

Я искал повсюду и, похоже, не могу найти хорошее руководство о том, как переходить страницы при нажатии на ссылку на моем сайте. Я хотел бы, чтобы при нажатии на ссылку страница исчезала и отображалась предварительно загруженная. Как только предварительная загрузка будет завершена, новая страница исчезнет. Вот пример того, о чем я говорю http://www.admirhadzic.com

Любая помощь была бы отличной.

Предварительный загрузчик

  <div id="preloader">
     <div id="status">amp;nbsp;</div>
 </div>
  

Скрипт

     $(window).load(function() { // makes sure the whole site is loaded
        $("#status").fadeOut(); // will first fade out the loading animation
        $("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website.
    })
  

css

  #preloader {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:#fff; /* change if the mask should have another color then white */
        z-index:99; /* makes sure it stays on top */
 }

 #status {
        width:200px;
        height:200px;
        position:absolute;
        left:50%; /* centers the loading animation horizontally one the screen */
         top:50%; /* centers the loading animation vertically one the screen */
         background-image:url(../img/status.gif); /* path to your loading animation */
         background-repeat:no-repeat;
         background-position:center;
         margin:-100px 0 0 -100px; /* is width and height divided by two */
 }
  

Сайт, упомянутый в вашем примере, http://www.admirhadzic.com /, похоже, использует AngularJS или аналогичный фреймворк. А именно, сайт содержится на одной странице, поэтому вы никогда не получите «белую вспышку» (упомянутую в комментариях) при переходе на другую страницу.

Без изменения структуры вашего приложения вы можете использовать ajax-запрос для асинхронного захвата нового содержимого страницы. В случае успеха метод ajax может заменить содержимое вашей страницы и выполнять именно то, что вы сейчас делаете в своей $(window).onload() функции.

Например:

 function LinkClick(){

  // load the waiting image and back-drop
  $("#preloader").fadeIn();
  $("#status").fadeIn();

  // kick off the ajax request for the new content
  $("#div-to-be-replaced").load("ajax/page-you-want-to-show.html", function(){
    $("#status").fadeOut();
    $("#preloader").fadeOut;
  });
}
  

Вы могли бы сделать то же самое с помощью jQuery.ajax () и, вероятно, ряда других функций. Смотрите http://api.jquery.com/load / и http://api.jquery.com/jquery.ajax /.