Эффект загрузки страницы с помощью jquery - PullRequest
Новая
       8

Эффект загрузки страницы с помощью jquery

1 голос
/ 19 мая 2010

Есть ли способ использовать jquery (или другой метод) для отображения div загрузки при загрузке страницы?

У меня есть таблица, которая заполнена с использованием PHP / MySQL и может содержать несколько тысяч строк. Затем это сортируется с помощью плагина tableorter для jquery. Все работает нормально, однако иногда полная загрузка страницы может занять 4-5 секунд, и было бы неплохо отобразить сообщение «loading ...» внутри div, которое автоматически исчезает при загрузке всей таблицы.

Я слышал о плагине loadmask для jquery - подойдет ли он для моих нужд, и если нет какой-либо альтернативы?

При загрузке этой таблицы не выполняются вызовы AJAX, если это необходимо.

Заранее спасибо Andy

Ответы [ 4 ]

1 голос
/ 19 мая 2010

Я думаю, что самый простой способ сделать это - использовать AJAX. Вам понадобятся два метода (сценария). Первый будет загружать начальную страницу с загрузочным изображением и небольшим количеством javascript для вызова второго метода. Второй метод будет возвращать HTML для вашей таблицы и javascript (в элементе body, а не в заголовке) для вызова таблиц сортировки. Javascript вызовет второй метод, получит HTML и вставит его на страницу, заменив сообщение о загрузке.

Пример: 

 <script type="text/javascript">
     $(function() {
         $.get( '/example.com/secondmethod.php', function(html) {
               $('#loadingImage').replaceWith( html );
         });
     });
 <script>

 <div id="doc">
     <img id="loadingImage" src="/example.com/images/loading.gif" alt="Loading..." />
 </div>
0 голосов
/ 19 мая 2010

Я бы попробовал следующее:

Как первый ребенок в своем теле, вставьте элемент div, например: 

<body>
    <div id="loading">Loading...</div>
    ...

Украсьте его соответствующим образом, например, например ::1006* 

#loading {
   position: fixed;
   top: 1em;
   left: 1em;
   z-index: 1; /* or a larger number */
   ...
}

Затем используйте следующий jQuery: 

$(document).ready(function() {
    $("#loading")[0].style.visibility = "hidden";
});

Я не могу проверить это прямо сейчас, надеюсь, в ней не так много ошибок ...

0 голосов
/ 19 мая 2010

Не знаю, действительно ли это то, что вам нужно, но вы могли бы просто отобразить сообщение с надписью «загрузка» и когда плагин tableort готов. Покажите таблицу и скройте загрузочный div. У этого метода есть свои плюсы и минусы.

Плюсы: 1. Реально легко реализовать. 2. Div загрузки покажет, пока таблица не будет завершена. Не знаю о сортировке таблиц, но, поскольку это клиентский код, большая вероятность, что задержка здесь.

Минусы: 1. Если длительное время загрузки связано с тем, что серверу потребуется много времени для ответа на запрос, это не поможет. Тогда вам лучше с решением AJAX. Смотрите ответ tvanfosson.

.. Фредрик

0 голосов
/ 19 мая 2010

Я надеюсь, что эта ссылка может вам помочь ... (так как я считаю, что вы не хотите использовать ajax)

http://forums.codecharge.com/posts.php?post_id=85584

спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...