13

Tengo un preload o progress que muestro antes de ser redireccionado a otra página.

Lo que deseo es que mientras se está cargando para abrir otra página, el div del progress vaya aumentándose hasta el 100%, al igual que un valor numérico (n/100).

Actualmente tengo el siguiente código:

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

En ajax_load llamo al progress, pero necesito que el valor del atributo aria-valuenow, vaya aumentando hasta 100, y n también aumente hasta 100, donde n/100.

Me gustaría poder pasarle valores mientras se empieza cargar la página, indicando el tiempo de demora, que comienza desde 0% hasta 100%, una vez terminada la carga del progress, se abra la página que solicité.

Estaba pensando usar alguna iteración y pasarle algo como esto:

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

Pero no se como lo hago, si alguien sabe se lo agradecería bastante. No se si se entiende lo que expuse

7
  • Dale una mirada a esto: [ jqueryui.com/progressbar/#label ] si no te sirve seguimos investigando. Commented el 12 feb. 2016 a las 1:33
  • La pagina a la que estas redireccionado esta en el mismo origen (protocolo, nombre de host y puerto) ? o es una pagina diferente, de otro sitio ? Commented el 12 feb. 2016 a las 1:37
  • la pagina está en el mismo sitio, es una subpagina, que recargo localmente dentro de un div. Similar a una vista parcial.
    – Danilo
    Commented el 12 feb. 2016 a las 2:20
  • la idea es que en el progress, se vaya mostrando el incremento hasta llegar a 100%, finalizado esto, muestra la subpagina.
    – Danilo
    Commented el 12 feb. 2016 a las 2:29
  • y este parcial que incluye, imagenes, audio, video ? Commented el 12 feb. 2016 a las 3:37

2 respuestas 2

7

Puedes hacer algo como lo que se explica en esta pregunta de StackOverflow o en la página web de Dave Bond (ambos enlaces en inglés). La idea es que la segunda versión de XMLHttpRequest incluye el evento onprogress que puedes escuchar y que te devolverá información interesante como por ejemplo:

  • Cuál es el tamaño total de la descarga.
  • Cuánto se ha descargado hasta ahora.
  • El timestamp del momento en el que ocurre el evento.

Con los dos primeros puedes calcular el porcentaje completado (tamaño descargado / tamaño total) y con el segundo puedes calcular cuánto está tardando la descarga (timestamp del onprogress - timestamp de cuando se realizó la petición inicial).

Tendrías que cambiar el load() por ajax() pero eso no debería ser un problema. Aplicado a tu código el cambio se vería así:

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

Y aquí dejo un ejemplo de como funcionaría con la descarga de una imagen grande (2.75MB). Si ya has visto la imagen, puede que necesites limpiar la caché para poder ver la barra avanzar:

<!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>

16
  • 1
    el problema con esta respuesta es que si el parcial tiene imágenes o audios (puede ser pues es para personas con capacidades visuales disminuidas) no estarías tomando en cuenta el tiempo de carga de estas partes, pero estoy adivinando pues no contesto mis comentarios aun. Commented el 12 feb. 2016 a las 3:47
  • Cierto, se escribiría el HTML y si hay imágenes y otro contenido multimedia, se empezará a cargar después. En mi defensa, OP tendría el mismo problema con el load.
    – Alvaro Montoro
    Commented el 12 feb. 2016 a las 3:51
  • totalmente, por eso le pregunte antes de contestar, pues preparaba una respuesta muy parecida y me di cuenta que quiza no es lo que OP necesita. Igual a la pregunta le falta contexto. Commented el 12 feb. 2016 a las 3:53
  • Disculpa @AlvaroMontoro, pero no soy muy bueno para ajax y jquery. ¿Como sería el controlador que tendría que añadirle para el evento onprogress?
    – Danilo
    Commented el 12 feb. 2016 a las 15:15
  • 1
    @Danilo He editado la respuesta para que la función xhr.onprogress se ajuste más a lo que pusiste en los comentarios. Ahora progress_id mostrará el porcentaje de la forma n/100, y se actualizará su ancho para que coincida con el porcentaje descargado
    – Alvaro Montoro
    Commented el 12 feb. 2016 a las 15:31
4

Saludos, Hay un plugin muy bueno llamado PACE, que en lo personal me ha ayudado a no tener que desgastarme en este tipo de cosas y me permite concentrarme en lo realmente importante.

Este plugin se encarga de todo, es muy liviano y fácil de utilizar. Además, soporta bower y es opensource, puedes revisarlo aquí: http://github.hubspot.com/pace/docs/welcome/ el repo en GitHub es: https://github.com/HubSpot/pace/

7
  • mmm...se ve bueno, tendré que ver como lo adapto al codigo que expuse
    – Danilo
    Commented el 14 feb. 2016 a las 4:13
  • como podría adapterse el plugin que me mostraste, para que se vaya mostrando, mientras se esta abriendo otra pagina.
    – Danilo
    Commented el 15 feb. 2016 a las 17:02
  • Como podría adaptarlo con esto: var ajax_load = function () { var incremento = 0; var progress = "<div class='progress'>" + "<div id='progress_id' class='progress-bar progress-bar-striped active' " + "role='progressbar' aria-valuenow='"+ incremento + "' aria-valuemin='0' aria-valuemax='100' style='width: 45%'>" + "<span>" + incremento + "/100</span></div></div>"; incremento=incremento +10; return progress; };
    – Danilo
    Commented el 15 feb. 2016 a las 17:03
  • $("#menu_navegacion_inicio").click(function (ev) { ev.preventDefault(); var href = $(this).attr('href'); $("#subpagina").html(""); $("#subpagina").html(ajax_load).load(baseUrl + href, function () { }); });
    – Danilo
    Commented el 15 feb. 2016 a las 17:03
  • @Danilo te refieres al plugin "Pace"? creo que tu pregunta no es muy clara. Sobre todo cuando dices "mientras se esta abriendo otra pagina" ¿A que te refieres con eso?. Por otra parte, con el plugin no deberias tener que hacer nada adicional, el plugin se encarga de interceptar todas las llamadas ajax de la página (inluyendo el load de contenidos de otro recurso). Commented el 17 feb. 2016 a las 17:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.