Прелоадер при переходе на другую страницу

Тема в разделе "JavaScript", создана пользователем silmarion, 30 май 2014.

Модераторы: ZiX
  1. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Добрый день, возникла необходимость сделать прелоадер при переходе на другую внутреннюю страницу сайта

    Нашел вот такой вариант

    Код:
    <div class="someclass">
      <div class="loading">
      Идёт загрузка, ждите...
      </div>
      </div>
      <script>
      jQuery(function($) {
      $(window).load(function () {
      $(".someclass").fadeOut(500);
      });
      });
      </script>
      <style>
         .someclass {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 5000;
      }
      .someclass .loading {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -40px 0 0 -150px;
      width: 260px;
      height: 20px;
      padding: 20px;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      font: normal 16px/20px Verdana, Geneva, Arial, Helvetica, sans-serif;
      text-shadow: 0 1px 2px #000;
      text-align: center;
      z-index: 5001;
      border: solid 2px #000;
      border-radius: 10px;
      box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.2);
      }
         </style>
    
    Работает, но немного не так как нужно.
    Скрипт показывает надпись Идёт загрузка, ждите...
    после того как уже перешло на другую страницу
    а при нажатии на ссылку или субмит на предыдущей странице все равно ждешь пока сначала загрузится новая страница, а только затем уже появляется надпись про загрузку.

    А как сделать чтобы надпись Идёт загрузка, ждите... появлялась сразу после клика по ссылке или сабмиту формы, и исчезала после того как будет осуществлен переход*
     
  2. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.547
    Симпатии:
    1.418
    Неверно выбран метод решения задачи. Тебе надо изменять запросы к серверу на ajax. И к событиям аякса привязывать прогресс.
    http://habrahabr.ru/post/190818/ - здесь не полное решение, но что-то близко, читать вместе с комментами.
     
    antiterror нравится это.