Показывать брусок прогресса со стоимостью пока загружается субстраница

У меня есть один предпохвалите или progress, который я показываю перед тем, как быть redireccionado в другую страницу.

Что желание состоит в том, чтобы пока оно загружено, чтобы открывать другую страницу, div progress был увеличен до 100 %, равно как числовой стоимости (n/100).

В настоящее время у меня есть следующий код:

var ajax_load = "<div class='progress'>" + "<div id='progress_id'   class='progress-bar progress-bar-striped active' " +
                    "role='progressbar' aria-valuenow='20' aria-valuemin='0' aria-valuemax='100' style='width: 45%'>" +
                    "n/100</div></div>";

$("#menu_navegacion_inicio").click(function (ev) {
        ev.preventDefault();
        var href = $(this).attr('href');        
        $("#subpagina").html(ajax_load).load(baseUrl + href, function () {
        });
    });

В ajax_load я называю progress, но нуждаюсь в том, что стоимость признака aria-valuenow, увеличьтесь до 100, и n также увеличьтесь до 100, где n/100.

Мне хотелось бы мочь перемещать ему стоимость пока начинается загружать страницу, показывая время задержки, которая начинается с 0 % до 100 %, как только был закончен груз progress, открылась страница, которую я попросил.

Он думал использовать какое-то повторение и перемещать что-то его как это:

........
.....
var valeur= valeur +10;
........
$('#progress_id').css('width', valeur+'%').attr('aria-valuenow', valeur);  
$('#progress_id').append(valeur + '/100')
......
......

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

13
задан 14.02.2016, 06:40
2 ответа

Ты можешь делать что-то, как что он объясняется в этом вопросе StackOverflow или на веб-странице Дэйва Бонд (обе ссылки на английском). Идея состоит в том, что вторая версия XMLHttpRequest включает событие onprogress который ты можешь слушать, и что возвратит тебе интересную информацию как например:

  • Каков полный размер разряда.
  • Сколько загрузилось до настоящего времени.
  • timestamp момента, в котором происходит событие.

С двумя первыми ты можешь вычислять процентное содержание завершенный (разгруженный размер / полный размер) и со вторым ты можешь предполагать, сколько опаздывает разряд (timestamp onprogress - timestamp, когда осуществилась начальная просьба).

Ты был бы должен меняться load() из-за ajax() но это не было бы должно быть проблемой. Примененный к твоему коду изменение оказалось бы таким:

var baseUrl = "";
var ajax_load = "<div class='progress'>" + "<div id='progress_id' class='progress-bar progress-bar-striped active' " +
                "role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style='width: 45%'>" +
                "n/100</div></div>";

$("#menu_navegacion_inicio").on("click", function(ev) {
  // estas dos lineas no cambian
  ev.preventDefault();
  var href = $(this).attr('href');

  // sustituir el contenido de subpagina con el mensaje de carga       
  $("#subpagina").html(ajax_load);

  // hacer llamada ajax al href
  $.ajax({
    url: baseUrl + href,
    // cuando se completa la petición
    success: function(codigo){
      // rellenar la subpagina con el HTML obtenido
      $("#subpagina").html(codigo);
    },
    // modificar el valor de xhr a nuestro gusto
    xhr: function(){
      // obtener el objeto XmlHttpRequest nativo
      var xhr = $.ajaxSettings.xhr() ;
      // añadirle un controlador para el evento onprogress
      xhr.onprogress = function(evt){ 
        // calculamos el porcentaje y nos quedamos sólo con la parte entera
        var porcentaje = Math.floor((evt.loaded/evt.total*100));
        // actualizamos el texto con el porcentaje mostrado
        $("#progress_id").text(porcentaje + "/100");
        // actualizamos la cantidad avanzada en la barra de progreso
        $("#progress_id").attr("aria-valuenow", porcentaje); 
        $("#progress_id").css("width", porcentaje + "%"); 
      };
      // devolvemos el objeto xhr modificado
      return xhr ;
    }
  });
});

И здесь я оставляю пример, как оно функционировало бы с разрядом большого изображения (2.75MB). Если уже ты увидел изображение, возможно, что ты нуждаешься в том, чтобы отложить кэш-память, чтобы мочь видеть, как брусок продвигаться:

<!doctype html>
<html>
  <head>
    <title>Test Onprogress</title>
  </head>
  <body>

    <a id="menu_navegacion_inicio" href="https://i.imgur.com/Bq6ryBM.jpg">Click here</a>
    <div id="subpagina"></div>

    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
    <script>
      baseUrl = "";
      var ajax_load = "<div class='progress'>" + "<div id='progress_id' class='progress-bar progress-bar-striped active' " +
          "role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style='width: 0%'>" +
          "n/100</div></div>";

      $("#menu_navegacion_inicio").on("click", function(ev) {
        // estas dos lineas no cambian
        ev.preventDefault();
        var href = $(this).attr('href');

        // sustituir el contenido de subpagina con el mensaje de carga       
        $("#subpagina").html(ajax_load);

        // hacer llamada ajax al href
        $.ajax({
          url: baseUrl + href,
          // cuando se completa la petición
          success: function(codigo){
            // rellenar la subpagina con el HTML obtenido
            $("#subpagina").html("COMPLETADO!");
          },
          // modificar el valor de xhr a nuestro gusto
          xhr: function(){
            // obtener el objeto XmlHttpRequest nativo
            var xhr = $.ajaxSettings.xhr() ;
            // añadirle un controlador para el evento onprogress
            xhr.onprogress = function(evt){ 
              // calculamos el porcentaje y nos quedamos sólo con la parte entera
              var porcentaje = Math.floor((evt.loaded/evt.total*100));
              // actualizamos el texto con el porcentaje mostrado
              $("#progress_id").text(porcentaje + "/100");
              // actualizamos la cantidad avanzada en la barra de progreso
              $("#progress_id").attr("aria-valuenow", porcentaje); 
              $("#progress_id").css("width", porcentaje + "%"); 
            };
            // devolvemos el objeto xhr modificado
            return xhr ;
          }
        });
      });
    </script>
  </body>
</html>
7
ответ дан 24.11.2019, 14:53
  • 1
    проблема с этим ответом - что, если у частичного есть im и # 225; гены или audios (он может быть, так как он состоит для людей с визуальными сокращенными способностями) в том, чтобы не быть, и # 237; эксперт принимая во внимание время груза этих частей, но я угадываю, так как я не отвечаю мои комментарии даже. –  rnrneverdies 12.02.2016, 05:47
  • 2
    Верный, писать себе и # 237; в HTML, и если есть im и # 225; гены и другой мультимедийный контент, быть начатым и # 225; чтобы грузить despu и # 233; в. В моей защите, OP tendr и # 237; в ту же проблему с load. –  Alvaro Montoro♦ 12.02.2016, 05:51
  • 3
    полностью, поэтому я спросил его перед тем, как отвечать, так как он готовил очень похожий ответ, и понял, что может быть не то, в чем OP нуждается. Равный вопросу, ему не хватает контекста. –  rnrneverdies 12.02.2016, 05:53
  • 4
    Извини @AlvaroMontoro, но я не очень хороший для ajax и jquery. и #191; Как быть и # 237; в драйвер, что tendr и # 237; в который в и # 241; adirle для события onprogress? –  Danilo 12.02.2016, 17:15
  • 5
    @Danilo я издал ответ для того, чтобы funci и # 243; n xhr.onprogress наладил м и # 225; s в то, что ты поместил в комментарии. Сейчас progress_id показывать и # 225; процентное содержание формы n/100, и становиться отвечающим современным требованиям и # 225; Ваша ширина для того, чтобы он совпал с разгруженным процентным содержанием –  Alvaro Montoro♦ 12.02.2016, 17:31

Привет, Есть очень хороший так называемый plugin ПАСЕТСЯ, что в личном помог мне не быть должным изнашивать меня в этом типе вещей и позволяет мне концентрироваться на действительно важном.

Этот plugin берется за все, очень легкомысленный и легкий для того, чтобы быть использованным. Кроме того, вынеси bower и он opensource, ты можешь проверять это здесь: http://github.hubspot.com/pace/docs/welcome/ repo в GitHub: https://github.com / HubSpot / пасется /

4
ответ дан 24.11.2019, 14:53
  • 1
    mmm... он оказывается хорошим, tendr и # 233; что видеть, как я это приспосабливаю к коду, который я выставил –  Danilo 14.02.2016, 06:13
  • 2
    как podr и # 237; в adapterse plugin, который ты показал мне, для того, чтобы он появился, пока открывается другая страница. –  Danilo 15.02.2016, 19:02
  • 3
    Как podr и # 237; чтобы это приспосабливать с этим: var ajax_load = function () {var я увеличиваю = 0; var progress = " < div class = и # 39; progress и # 39; > " + " < div пойдите = и # 39; progress_id и # 39; class = и # 39; progress-бар progress-bar-striped включил и # 39; " + " role = и # 39; progressbar и # 39; ария - valuenow = и # 39; " + я увеличиваю + " и #39; ария - valuemin = и # 39; 0 и # 39; ария - valuemax = и # 39; 100 и # 39; style = и # 39; width: 45 % и # 39; > " + " < span> " + я увеличиваю + " / 100< / span> < / div> < / div> "; incremento=incremento +10; return progress;}; –  Danilo 15.02.2016, 19:03
  • 4
    $ (" #menu_navegacion_inicio") .click (function (ev) {ev.preventDefault (); var href = $ (this) .attr (и #39; href и # 39;); $ (" #subpagina") .html (" "); $ (" #subpagina") .html (ajax_load) .load (baseUrl + href, function () {});}); –  Danilo 15.02.2016, 19:03
  • 5
    @Danilo ты имеешь в виду plugin " Pace"? я думаю, что твой вопрос не является очень ясным. Прежде всего, когда ты говоришь " пока открывается другая pagina" и #191; что ты имеешь в виду с этим?. С другой стороны, с plugin у тебя не было бы должно бы быть, что делать совсем не добавочный, plugin берется за то, чтобы перехватывать все вызовы ajax ее p и # 225; gina (inluyendo load контентов другого ресурса). –  Camilo Bernal 17.02.2016, 19:09