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

Тема в разделе "DLE", создана пользователем mishiko, 5 янв 2014.

Информация :
Актуальная версия DataLife Engine 11.1
( Final Release v.11.1 | Скачать DataLife Engine | Скачать 11.1 demo )
Нужно ли обновляться | Как обновиться | Изменения в шаблонах
> Нет русских символов <
[Приватная тема DLE (Все подробности в ЛС к модератору раздела)]

Версии 10.0 и ниже - уязвимы!

Локализации | F.A.Q. | Внешний вид
Правила раздела | Правила форума
Обсуждение хайда карается баном!
В каждом сообщении указывайте версию DLE, которого они касаются!
Модераторы: killoff
  1. mishiko

    mishiko Создатель

    Регистр.:
    5 сен 2011
    Сообщения:
    255
    Симпатии:
    101
    1.
    1377373021_nprogress-dle.png
    Чтоб убрать в DLE стандартное окошко "Загрузка", мы подключим интересный скрипт, который заменит это "Укозовское убожество" на современный индикатор.

    Вступление

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

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

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

    1. Для подключения, нам нужны файлы nprogress.js и nprogress.css. Вы можете их скачать с GitHab'а выше, либо взять из моего архива - nprogress-dle.zip (в нём немного изменён внешний вид и сжат 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 функций ДЛЕ(добавление/удаление комментариев, голосования, календарь и т.д.), будет появляться новый индикатор.
     
    Sorcus и Горбушка нравится это.
  2. stanislavsss

    stanislavsss Постоялец

    Регистр.:
    28 ноя 2012
    Сообщения:
    87
    Симпатии:
    2
    Я так понимаю файлы .gs и .css кидать папку с шаблоном. А можно ли подробнее про это
    Открываем файл /engine/classes/js/dle_js.js и находим (для DLE 10, в других, может немного отличаться:(
    какой код искать в dle 10.1? Пытался найти код для замены (даже по обрывкам кода) - не нашёл...

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

    MSW

    Регистр.:
    27 авг 2007
    Сообщения:
    491
    Симпатии:
    408
    stanislavsss
    делал не по данной инструкции, но суть таже самая - подключение стилей и жс, замена функции начала и окончания лоадинга
    после обязательная чистка кеша в админке дле и браузере
    дле 10.1
     
    Горбушка нравится это.
  4. Горбушка

    Горбушка Ищу её...

    Регистр.:
    2 май 2008
    Сообщения:
    3.034
    Симпатии:
    2.035
    Я хотел бы обратить внимание, что на быстром соединении и хорошем хостинге эта штука работать не будет. Вернее, работать оно будет, но Вы не успеете увидеть её работу - если AJAX отрабатывает за несколько мс - Вы не успеете увидеть лодер.
     
    Sorcus нравится это.
  5. theBeknazar

    theBeknazar Постоялец

    Регистр.:
    29 июн 2012
    Сообщения:
    56
    Симпатии:
    18
    Без всяких заморочек http://github.hubspot.com/pace/docs/welcome/
    сам лучший вариант для лоадера + несколько интересных скинов.
    2 шага чтобы подключить. Тупо JS и CSS все работает!
     
    Balloonio и Горбушка нравится это.
  6. clubmen

    clubmen

    Регистр.:
    18 янв 2010
    Сообщения:
    187
    Симпатии:
    30
    замедлить его возможность есть? у меня при 30мбитах входящей у ютуба анимацию видно.
     
  7. stanislavsss

    stanislavsss Постоялец

    Регистр.:
    28 ноя 2012
    Сообщения:
    87
    Симпатии:
    2
    Вот ещё отличнейший вариант, http://www.rudebox.org.ua/light-load-page-to-site/ в центре размещается название сайта. Очень хочу прикрутить его для своего сайта, но неполучается, может кто-нибудь подскажет пошагово как это сделать для dle 10.1?
     
  8. killoff

    killoff CD тихо, и не DVD меня ;)

    Moderator
    Регистр.:
    13 май 2008
    Сообщения:
    2.017
    Симпатии:
    680
    Коменты там читал? Ставил на разные двиги - эти круги не пропадают даже после полной загрузки страницы. И зачем спрашивается такой загрузчик нужен?
     
  9. stanislavsss

    stanislavsss Постоялец

    Регистр.:
    28 ноя 2012
    Сообщения:
    87
    Симпатии:
    2
    Судя по тамошним коментам у кого-то всё же работает, я просто подумал, возможно там у людей руки кривые, поэтому и неработало, вот и решил спросить здесь, уж очень понравился мне этот загрузчик, но если вы ставили на разные двиги и нигде не работает, чтож, тогда в топку его... Там есть ещё один, менее оригинальный, но тоже прикольный - попробуйте его http://www.rudebox.org.ua/led-download-page-to-css/

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

    Горбушка Ищу её...

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

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

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

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

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