Хак Современный индикатор загрузки для DLE

[mishiko]

1.

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

Вступление

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

Можете посмотреть Для просмотра ссылки Войди или Зарегистрируйся или скачать на Для просмотра ссылки Войди или Зарегистрируйся

Подключение к DLE

1. Для подключения, нам нужны файлы nprogress.js и nprogress.css. Вы можете их скачать с GitHab'а выше, либо взять из моего архива - Для просмотра ссылки Войди или Зарегистрируйся (в нём немного изменён внешний вид и сжат JS)

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

<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() }

3. При желании можно из index.php, удалить теперь уже не нужный код:

<div id="loading-layer" style="display:none">{$lang['ajax_info']}</div>

Готово

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

 

[stanislavsss]

Я так понимаю файлы .gs и .css кидать папку с шаблоном. А можно ли подробнее про это

Спойлер

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

какой код искать в dle 10.1? Пытался найти код для замены (даже по обрывкам кода) - не нашёл...

В общем скажу так /engine/classes/js/dle_js.js в 46 строчке (dle 10.1) нашел код который необходимо было изменить, но к сожалению "хак" не работает! Думаю, что необходимо всё-таки оптимизировать под новые версии dle...

 

[MSW]

stanislavsss
делал не по данной инструкции, но суть таже самая - подключение стилей и жс, замена функции начала и окончания лоадинга
после обязательная чистка кеша в админке дле и браузере
дле 10.1

 

[Горбушка]

Я хотел бы обратить внимание, что на быстром соединении и хорошем хостинге эта штука работать не будет. Вернее, работать оно будет, но Вы не успеете увидеть её работу - если AJAX отрабатывает за несколько мс - Вы не успеете увидеть лодер.

 

[theBeknazar]

Без всяких заморочек Для просмотра ссылки Войди или Зарегистрируйся
сам лучший вариант для лоадера + несколько интересных скинов.
2 шага чтобы подключить. Тупо JS и CSS все работает!

 

[clubmen]

Я хотел бы обратить внимание, что на быстром соединении и хорошем хостинге эта штука работать не будет. Вернее, работать оно будет, но Вы не успеете увидеть её работу - если AJAX отрабатывает за несколько мс - Вы не успеете увидеть лодер.

замедлить его возможность есть? у меня при 30мбитах входящей у ютуба анимацию видно.

 

[stanislavsss]

Вот ещё отличнейший вариант, Для просмотра ссылки Войди или Зарегистрируйся в центре размещается название сайта. Очень хочу прикрутить его для своего сайта, но неполучается, может кто-нибудь подскажет пошагово как это сделать для dle 10.1?

 

[killoff]

Вот ещё отличнейший вариант, Для просмотра ссылки Войди или Зарегистрируйся в центре размещается название сайта. Очень хочу прикрутить его для своего сайта, но неполучается, может кто-нибудь подскажет пошагово как это сделать для dle 10.1?

Коменты там читал? Ставил на разные двиги - эти круги не пропадают даже после полной загрузки страницы. И зачем спрашивается такой загрузчик нужен?

 

[stanislavsss]

Коменты там читал? Ставил на разные двиги - эти круги не пропадают даже после полной загрузки страницы. И зачем спрашивается такой загрузчик нужен?

Судя по тамошним коментам у кого-то всё же работает, я просто подумал, возможно там у людей руки кривые, поэтому и неработало, вот и решил спросить здесь, уж очень понравился мне этот загрузчик, но если вы ставили на разные двиги и нигде не работает, чтож, тогда в топку его... Там есть ещё один, менее оригинальный, но тоже прикольный - попробуйте его Для просмотра ссылки Войди или Зарегистрируйся

У меня такой вопрос, может кто сталкивался, уже перепробовал все "хаки", что мог найти для dle (версия 10.1) но loading.gif не работает, кроме того не отображается даже стандартная надпись "Загрузка. Пожалуйста подождите". Сайт пока на денвере, даже при очистке кеша, когда страница долго грузится нет ни анимации, ни надписи. Проверял в опере, яндекс браузере, в хроме, фаирфоксе нигде нет! Может нехватает каких-то стандартных файлов? Ну если так, были бы ошибки в браузерах, а ошибок нет. Кто знает где, а главное что нужно прописать чтобы заработало?

 

[Горбушка]

Собственно сегодня делать было нечего - сел, поковырял минут 10, поставил лодер по ссылке выше (круги вращающиеся) - всё прекрасно работает. Да, загрузку страницы он не показывает, а вот AJAX прекрасно заменил.

Демо тут: dle.demo.gorbushka.name

Инструкция примитивна как 2 пальца об асфальт...

Открываем index.php
Находим <div id="loading-layer" style="display:none">
В этот див помещаем всё, что нам захочется - картинки, прочую хрень, хоть круги по ссылке выше...
Далее добавляем CSS и готово.

Все AKAX будут сопровождаться Вашим красивым лодингом... С загрузкой страницы чуть сложнее... Нужно на JS делать условие скрытия лодинга по окончанию загрузки... Впрочем, это дело тоже не сложное. Достаточно будет убрать у дива style="display:none" и дописать условие в JS...