NProgress.js, чтобы показать ход загрузки страницы

Question

Я пытаюсь понять, как использовать NProgress.js в качестве общей загрузки страницы для всех страниц сайта. Я не могу найти какую-либо документацию или простой способ добавить этот эффект загрузки на загрузку страницы и завершить ее, когда загрузится вся страница.

http://ricostacruz.com/nprogress/

Любая помощь очень ценится!

Answer 1

На главной странице: http://ricostacruz.com/nprogress/

я нашел это (с шоу-страницы исходного кода):

<script> 
$('body').show(); 
$('.version').text(NProgress.version); 
NProgress.start(); 
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000); 

$("#b-0").click(function() { NProgress.start(); }); 
$("#b-40").click(function() { NProgress.set(0.4); }); 
$("#b-inc").click(function() { NProgress.inc(); }); 
$("#b-100").click(function() { NProgress.done(); }); 
</script> 

Как вы можете видеть, что вам нужно использовать NProgress.start(); для запуска индикатора выполнения. Попробуйте что-то вроде этого (я использовал функцию jquery ready):

<script> 
NProgress.start(); 
NProgress.set(0.4); 
//Increment 
var interval = setInterval(function() { NProgress.inc(); }, 1000); 
$(document).ready(function(){ 
    NProgress.done(); 
    clearInterval(interval); 
}); 
</script> 

Answer 2

Я работаю над чем-то с nprogress и наткнулся на ваш вопрос. Я также с помощью полосы прокрутки плагин, и это то, что я придумал:

<script> 
    (function($) { 

     NProgress.start(); 
     $("#user-book-list").hide(); 

     setTimeout(function() { 
      $(window).load(function() { 

       $("#user-book-list").show(); 

       $("#user-book-list").mCustomScrollbar({ 
        autoHideScrollbar: false, 
        horizontalScroll: true, 
        theme: "dark-thin", 
        advanced: { autoExpandHorizontalScroll: true, updateOnContentResize: false } 
       }); 

       NProgress.done(); 

      }); 
     }); 

    })(jQuery); 
</script> 

я уверен, что вы можете просто вынуть пользовательские полосы прокрутки вещи, и он будет достичь желаемого результата. Я измеряю li s в #user-book-listul и, как результат, см. Быструю вспышку незакрашенных элементов. nprogress помог скрыть это, но теперь изображения просто появляются. Эффект fadeIn() или что-то в этом роде облегчит эту проблему ... lol.

РЕДАКТИРОВАТЬ: HubSpot запускает некоторые хорошие проекты с открытым исходным кодом. Один из них - загрузчик, вдохновленный nprogress, но гораздо проще реализовать: http://github.hubspot.com/pace/docs/welcome

Теперь я использую это вместо nprogress. Никаких зависимостей не требуется.

Answer 3

Проще говоря, поместить этот JavaScript в любом месте HTML, это хорошая практика, чтобы поместить его перед закрывающим тегом тела:

<script> 

    // Show the progress bar 
    NProgress.start(); 

    // Increase randomly 
    var interval = setInterval(function() { NProgress.inc(); }, 1000);   

    // Trigger finish when page fully loaded 
    jQuery(window).load(function() { 
     clearInterval(interval); 
     NProgress.done(); 
    }); 

    // Trigger bar when exiting the page 
    jQuery(window).unload(function() { 
     NProgress.start(); 
    }); 

</script> 

Ох, и не следует путать, NProgress находится в глобальном масштабе, это не имеет никакого отношения к jQuery, я использую jQuery .load()/.unload() только для удобства, и, пожалуйста, не кладите NProgress.start() внутри документа jquery .ready(), это бесполезный беспорядок.