Индикатор загрузки для запуска веб-приложения javaScript

Как я могу сделать что-то подобное, например, GMail имеет http://o7.no/H72gPf Когда приложение запускается, gmail показывает индикатор выполнения, и он показывает нам процент (часть) загруженного содержимого.Индикатор загрузки для запуска веб-приложения javaScript

Как я могу считать, что определенный JS-файл (HTML-контент, CSS или изображения) загружен частично или полностью?

P.S. На стороне сервера я хотел бы использовать PHP

источник

2012-03-27 user1016265

Если вам действительно нужен, ваша страница, вероятно, слишком медленная. Если вы сделаете точный (т.не подделывает его), ваша страница, вероятно, будет слишком сложной. –

Как насчет приложений? Не все, что делается в браузере, это просто веб-сайт. –

@KenThompson yep это не обычный веб-сайт. Это будет веб-сервис, например, веб-приложение – user1016265

Вы можете сделать это несколькими способами.

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

Так что, если вы определить это в теге сценария в голове документа:

function increment_progress() { 
    // your HTML-dependent implementation here 
}

Тогда просто сделать это в нижней части встроенных скриптов:

increment_progress();

Что increment_progress делает действительно зависит о том, как выглядит ваш прогресс-бар, и как вы его создаете с помощью HTML.

Например, у вас может быть ТАБЛИЦА в DIV, добавив TD в первую строку TABLE, каждый из которых вызывает increment_progress с фиксированной шириной TD и различными цветами фона для TD и DIV. Затем вы выбираете ширину для TD, которая примерно равна (ширина DIV)/(количество загружаемых скриптов).

Что-то вроде этого:

<html> 
<head> 
    <style type="text/css"> 
    #your_interface { display: none; } 
    #progressbar { width: 100px; background: #00ff00; } 
    #progressbar table { width: 100%; margin: 0px; } 
    #progressbar table td { padding: 0px; border: 0px; 
          border-collapse: collapse; 
          background: #ff0000; width: 10px; } 
    </style> 
    <script type="text/javascript" href="/path/to/jquery"></script> 
    <script type="text/javascript"> 
    var count = 0; 
    function increment_progress() { 
     $('#progressbar table tr').eq(0).append('<td>&nbsp;</td>'); 
     count++; 
     if (count == 9) { // the number of scripts loaded below 
      $('#progressbar').hide(); 
      $('#your_interface').show(); 
     } 
    } 
    </script> 
<head> 
<body> 
    <div id="progressbar"><table><tr><td></td></tr></table></div> 

    <div id="your_interface"> 
    The rest of your content here! 
    </div> 

    <script type="text/javascript" href="/path/to/script1"></script> 
    <script type="text/javascript" href="/path/to/script2"></script> 
    <script type="text/javascript" href="/path/to/script3"></script> 
    <script type="text/javascript" href="/path/to/script4"></script> 
    <script type="text/javascript" href="/path/to/script5"></script> 
    <script type="text/javascript" href="/path/to/script6"></script> 
    <script type="text/javascript" href="/path/to/script7"></script> 
    <script type="text/javascript" href="/path/to/script8"></script> 
    <script type="text/javascript" href="/path/to/script9"></script> 
</body> 
</html>

Если у вас есть быстрый сервер и быстрый доступ к сети Интернет, вы будете только видеть его :-)

Если вы уже загрузки скриптов с использованием AJAX , вы можете вызвать increment_progress() из функции обработчика «response».

Обновление:, чтобы показать, как перейти к реальному пользовательскому интерфейсу после загрузки.

источник

2012-03-27 08:52:32

Спасибо за идею. это хорошо, но недостаточно для меня. Я хотел бы получить следующую картину. Пустой экран с индикатором загрузки. За этим (в скрытом состоянии) можно продолжать загрузку всего содержимого, изображений, css, js, html ... и когда все, загруженное и готовое к использованию, становится видимым – user1016265

на самом деле этот экран, который я хотел бы увидеть только один раз, все остальные запросы моего приложение будет выполнено без перезагрузки всей страницы. – user1016265

Добавьте условное выражение в increment_loader() в $ ('# your_interface'). show() и $ ('# progressbar'). hide(). Сделайте как ваш интерфейс, так и загрузчик позиционированным/стилизованным, как вы хотите использовать CSS. –

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

Создать страницу с IFRAME в нем, странице внутри iframe запускается новый поток, который находится в приложении. После запуска потока он показывает страницу с индикатором выполнения, у нее также есть простой скрипт, который перезагружает страницу каждые x секунд. Это может быть так просто, как это:

<html> 
    <head></head> 
    <body> 
     <script> 
      setTimeout(function(){ 
       window.location.reload(); 
      }, 10000); 
     </script> 
     <img src="/images/loader.gif" /> 
    </body> 
</html>

Когда страница перезагружается он сначала проверяет статус заявки и чем отправить либо страницу загрузки еще раз или страницу, которая перезагружает верхнюю рамку для фактического начала приложения экрана.

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

источник

2012-03-27 12:33:10

window.location.reload делает каждый раз новый запрос Http? – user1016265

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

Индикатор загрузки для запуска веб-приложения javaScript

ответ

Смежные вопросы