прогресс бар на jquery как на YouTube

вопрос

Здравствуйте!

на YouTube когда страница грузится идет полоса загрузки в самом верху экрана.
Как реализовать такую же загрузку на сайте dle?
вот нашел похожую идею, http://altyncev.ru/posts/2013/08/rebuild-youtubes-progress-bar

Ответил: Aleksey-Nyaka

Чтоб убрать в DLE стандартное окошко "Загрузка", можно подключить интересный скрипт.

Сам скрипт называется NProgress.js. Он добавляет тоненькую полоску-индикатор вверху страницы, которая показывает прогресс загрузки.

Можете посмотреть демо или скачать на GitHab

Подключение к DLE
Для подключения, нам нужны файлы nprogress.js и nprogress.css. Вы можете их скачать с GitHab'а.

Инструкция внутри

1. В своём шаблоне, в файле main.tpl, перед подключаем скрипт и стили:

<link href="{THEME}/css/nprogress.css" media="all" rel="stylesheet" />
<script src="{THEME}/js/nprogress.js"></script>

2. Открываем файл /engine/classes/js/dle_js.js и находим (для DLE 10, в других, может немного отличаться):

function ShowLoading(b){b&&$("#loading-layer").html(b);b=($(window).width()-$("#loading-layer").width())/2;var c=($(window).height()-$("#loading-layer").height())/2;$("#loading-layer").css({left:b+"px",top:c+"px",position:"fixed",zIndex:"99"});$("#loading-layer").fadeTo("slow",0.6)}function HideLoading(){$("#loading-layer").fadeOut("slow")}

Меняем на

function ShowLoading(b){ NProgress.start() } function HideLoading(){ NProgress.done() }

Готово
Теперь при совершении стандартных AJAX функций ДЛЕ(добавление/удаление комментариев, голосования, календарь и т.д.), будет появляться новый индикатор

И небольшой бонус, может кому пригодится.

Установка для System points 1.5

Инструкция внутри

Открываем /engine/modules/points/inc.ajax.js и ищем там:

{if(!this.loading_fired){this.loading_fired=1;b&&$("#loading-layer-text").html(b);b=($(window).width()-$("#loading-layer").width())/
2;var a=($(window).height()-$("#loading-layer").height())/2;$("#loading-layer").css({left:b+"px",top:a+"px",position:"fixed",zIndex:"99"});$("#loading-layer").fadeTo("slow",0.6)}}

Заменить на:

{ NProgress.start() }

- В этом же файле ищем:

{$("#loading-layer").fadeOut("slow");this.loading_fired=0}

Заменить на:

{ NProgress.done() }

У вас должно получиться

this.onShow=function(b){if(!this.loading_fired){ NProgress.start() }};this.onHide=function(){ NProgress.done() };

Установка для iChat

Инструкция внутри

Открываем /templates/ВАША ТЕМА/iChat/js/action.js и ищем там:

function iShowLoading( message )
{

    if ( message )
    {
        $("#loading-layer-text").html(message);
    }
        
    var setX = ( $(window).width()  - $("#loading-layer").width()  ) / 2;
    var setY = ( $(window).height() - $("#loading-layer").height() ) / 2;
            
    $("#loading-layer").css( {
        left : setX + "px",
        top : setY + "px",
        position : 'fixed',
        zIndex : '99'
    });
        
    $("#loading-layer").fadeTo('slow', 0.6);

};

Заменить на:

function iShowLoading( message )
{
{ NProgress.start() }
};

- В этом же файле ищем:

function iHideLoading( message )
{
    $("#loading-layer").fadeOut('slow');

};

Заменить на:
function iHideLoading( message )
{
{ NProgress.done() }
};

11 комментариев

Юзер

107

nambo1 - 2015-04-119 января 2014 17:05 - #21211

dle 10.1

function ShowLoading(a){a&&$("#loading-layer").html(a);a=($(window).width()-$("#loading-layer").width())/2;var c=($(window).height()-$("#loading-layer").height())/2;$("#loading-layer").css({left:a+"px",top:c+"px",position:"fixed",zIndex:"99"});$("#loading-layer").fadeTo("slow",0.6)}function HideLoading(a){$("#loading-layer").fadeOut("slow")}

Только вопрос по моему был как сделать это при открытие страницы

Юзер

107

nambo1 - 2015-04-119 января 2014 19:29 - #21219

Ну так что, кто нить скажет как это сделать для открытия страницы?

Юзер

242

Kota - 2015-04-119 января 2014 21:57 - #21225

В смысле при открытии страницы?

Юзер

107

nambo1 - 2015-04-119 января 2014 22:45 - #21226

Aleksey-Nyaka,
Ну сейчас этот прогресс бар показывается при совершении AJAX функций (спасибо кэп) а нужно что бы он также показывался, когда я открываю страницу (как в демо) Вoбщем (есть такое слово!) я думаю ты понял

PHP-developer

1783

Sander - 2015-04-1110 января 2014 03:18 - #21249

"Вобщем" - нет такого слова. Есть "в общем" и "вообще".

Думаю можно попробовать так.
В main.tpl после подключения скрипта вставить:

<script>
NProgress.start();
$(function(){
  NProgress.done();
});
</script>

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

Юзер

242

Kota - 2015-04-1110 января 2014 09:38 - #21255

Покупай и ставь AJAX навигация v.3.7. И будет тебе счастье =)
Все переходы по страницам будут сопровождаться индикатором загрузки)

PHP-developer

1783

Sander - 2015-04-1110 января 2014 14:19 - #21276

"Переходы", но не первое открытие страницы ;)

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

Юзер

242

Kota - 2015-04-1111 января 2014 06:16 - #21332

Цитата: Sander

"Переходы", но не первое открытие страницы ;)

Согласен. глупо ведь будет.. =)

Юзер

107

nambo1 - 2015-04-1111 января 2014 14:39 - #21363

Sander,
я так пробовал с самого начала - ноль результата.
А как быть то тогда? пробовал ставить красную как на ютубе - она не правильно отображала
Имхо: ставить эту тему для AJAX не очень то и красиво(