Wot-News Просмотр темы - Индикатор загрузки страницы модуля

Индикатор загрузки страницы модуля

Модератор: Exinaus, shw

Сообщений: 12

Ответить

iron-din

Новичок

Сообщения

Зарегистрирован

10 янв 2016, 13:57

Индикатор загрузки страницы модуля

#172491 iron-din 10 янв 2016, 14:06

Подскажите пожалуйста. Вот в данном модуле уже реализован индикатор загрузки страницы скрипта но он открывает страницу когда загрузились данные но не сама страница (получается страница с разбросанными данными по экрану браузера, файл скрина прилагаю)
как сделать чтобы загрузка страницы была скрыта пока не загрузится полностью.

Вложения

Скриншот загрузки скрипта

Edrard

Администратор

Сообщения

56374

Зарегистрирован

20 апр 2011, 18:58

Откуда

Киев

Контакты

Re: Индикатор загрузки страницы модуля

#172652 Edrard 11 янв 2016, 13:46

Самый простой вариант, который приходит на ум.

Открываете файл /views/header.php и меняем

Код: Выделить всё

    <script type="text/javascript"> 
        $(document).ready(function() {
            $("#menu").menu();
            $("#allcontainer").tabs({
                ajaxOptions: {
                    error: function( xhr, status, index, anchor ) {
                        $( anchor.hash ).html(
                            "<?php echo $lang['error_1'];?>");
                    }
                }
            });
            $('#allcontainer ul li a').click(function () {window.location.hash = $(this).attr('href');window.scrollTo(0, 0);});
            $('body').show();
        });
    </script>

на

Код: Выделить всё

    <script type="text/javascript">
        $(document).on('tabsactivate',function(event,ui){
            var $t = ui.newPanel.find('table');
            $t.trigger('applyWidgets');
        }).ready(function(){    
            $("#allcontainer").tabs({
                ajaxOptions: {
                    error: function( xhr, status, index, anchor ) {
                        $( anchor.hash ).html(
                            "<?php echo $lang['error_1'];?>");
                    }
                }
            });
        });

        $(document).ready(function() {
            $("#menu").menu();
            $('#allcontainer ul li a').click(function () {window.location.hash = $(this).attr('href');window.scrollTo(0, 0);});
            $('body').show( "fade", {}, 100, function(){
                $('.tablesorter').trigger('applyWidgets');
            });
        });
    </script>

Затем находите где начинается тег <body> и за ним добавляете
<script type="text/javascript">
$('body').hide();
</script>

iron-din

Новичок

Сообщения

Зарегистрирован

10 янв 2016, 13:57

Re: Индикатор загрузки страницы модуля

#172816 iron-din 12 янв 2016, 18:38

Edrard писал(а):Самый простой вариант, который приходит на ум.

Открываете файл /views/header.php

в нем находите следующую строку
$('#allcontainer ul li a').click(function () {window.location.hash = $(this).attr('href');window.scrollTo(0, 0);});
и после нее добавляете
$('body').show();

Затем находите где начинается тег <body> и за ним добавляете
<script type="text/javascript">
$('body').hide();
</script>

Так не получается. В таком варианте теряется оформление таблиц. Ниже скриншот. В чем может быть проблема.? Где еще копать?

Вложения

Edrard

Администратор

Сообщения

56374

Зарегистрирован

20 апр 2011, 18:58

Откуда

Киев

Контакты

Re: Индикатор загрузки страницы модуля

#172833 Edrard 12 янв 2016, 20:33

Это не проблема, просто нужно реинициализировать виджет зебры для тейблсортера по завершению работы функции шоу, в общем вместо
$('body').show();
поставьте
$('body').show( "fade", {}, 100, function(){
$('.tablesorter').trigger('applyWidgets');
});

iron-din

Новичок

Сообщения

Зарегистрирован

10 янв 2016, 13:57

Re: Индикатор загрузки страницы модуля

#172840 iron-din 12 янв 2016, 21:46

Edrard писал(а):Это не проблема, просто нужно реинициализировать виджет зебры для тейблсортера по завершению работы функции шоу, в общем вместо
$('body').show();
поставьте
$('body').show( "fade", {}, 100, function(){
$('.tablesorter').trigger('applyWidgets');
});

Спасибо но стала другая проблема. В данном случае нормально отображается лишь одна страница, все остальные пункты меню также отображаются некорректно.
Временно пока не получится сделать вышеописанный вариант сделал просто:

Код: Выделить всё<body style="visibility: hidden" onload="setTimeout ('document.body.style.visibility = \'visible\'', 0)">

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

Edrard

Администратор

Сообщения

56374

Зарегистрирован

20 апр 2011, 18:58

Откуда

Киев

Контакты

Re: Индикатор загрузки страницы модуля

#172847 Edrard 12 янв 2016, 22:40

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

Код: Выделить всё

    <script type="text/javascript"> 
        $(document).ready(function() {
            $("#menu").menu();
            $("#allcontainer").tabs({
                ajaxOptions: {
                    error: function( xhr, status, index, anchor ) {
                        $( anchor.hash ).html(
                            "<?php echo $lang['error_1'];?>");
                    }
                }
            });
            $('#allcontainer ul li a').click(function () {window.location.hash = $(this).attr('href');window.scrollTo(0, 0);});
            $('body').show();
        });
    </script>

на

Код: Выделить всё

    <script type="text/javascript">
        $(document).on('tabsactivate',function(event,ui){
            var $t = ui.newPanel.find('table');
            $t.trigger('applyWidgets');
        }).ready(function(){    
            $("#allcontainer").tabs({
                ajaxOptions: {
                    error: function( xhr, status, index, anchor ) {
                        $( anchor.hash ).html(
                            "<?php echo $lang['error_1'];?>");
                    }
                }
            });
        });

        $(document).ready(function() {
            $("#menu").menu();
            $('#allcontainer ul li a').click(function () {window.location.hash = $(this).attr('href');window.scrollTo(0, 0);});
            $('body').show( "fade", {}, 100, function(){
                $('.tablesorter').trigger('applyWidgets');
            });
        });
    </script>

Опять таки, если не хотите что бы был белый экран, может приаттачить в начале загрузки страницы какую то гифку или ЦСС
http://cssload.net/ru/
http://tobiasahlin.com/spinkit/

Ну, и в конце загрузки вот тут в функции
$('body').show( "fade", {}, 100, function(){
$('.tablesorter').trigger('applyWidgets');
});
просто детачнуть это.

iron-din

Новичок

Сообщения

Зарегистрирован

10 янв 2016, 13:57

Re: Индикатор загрузки страницы модуля

#173461 iron-din 16 янв 2016, 21:57

Огромное вам спасибо буду пробовать.

viktor6

Регулярные войска

Сообщения

298

Зарегистрирован

06 мар 2013, 22:25

Re: Индикатор загрузки страницы модуля

#174660 viktor6 25 янв 2016, 18:59

И как результаты

viktor6

Регулярные войска

Сообщения

298

Зарегистрирован

06 мар 2013, 22:25

Re: Индикатор загрузки страницы модуля

#175016 viktor6 26 янв 2016, 18:35

А куда этот код вставлять? взято http://cssload.net/ru/

Код: Выделить всё

 <div class="windows8">
   <div class="wBall" id="wBall_1">
      <div class="wInnerBall"></div>
   </div>
   <div class="wBall" id="wBall_2">
      <div class="wInnerBall"></div>
   </div>
   <div class="wBall" id="wBall_3">
      <div class="wInnerBall"></div>
   </div>
   <div class="wBall" id="wBall_4">
      <div class="wInnerBall"></div>
   </div>
   <div class="wBall" id="wBall_5">
      <div class="wInnerBall"></div>
   </div>
</div>

Edrard

Администратор

Сообщения

56374

Зарегистрирован

20 апр 2011, 18:58

Откуда

Киев

Контакты

Re: Индикатор загрузки страницы модуля

#175083 Edrard 26 янв 2016, 21:28

Там, где вы хотите, что бы он появился. Как подсказка. Можно сделать див элемент с позицией абсолют, у которого будет большой з-индекс и за счет этого он будет лежать поверх всего, затем в центре его распологаем тот код который вы дали и в нужный момент вы при помощи ЖС аттачите его к боди, а по завершению всех процедур - детачите.

Ответить

Перейти:

Вернуться в Модуль статистики клана

Показать:

Поле сортировки

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 3