52 votos

Curiosidad por conocer la nueva forma de YouTube es la carga de las páginas

He notado que cuando estoy viendo un video y hago clic en el logotipo o un video relacionado con el que un rojo de la barra de progreso (por encima del logo) guiones a través de la pantalla. Al mismo tiempo hay una ligera superposición "gris" en el contenido, a continuación, se desvanece en la nueva página. FYI, la URL cambia a la nueva dirección URL antes de que la barra de progreso y la transición que ocurre.

El div ID de la barra de progreso. Parece algún tipo de cool jQuery ajax carga, pero el cambio de páginas. No sé.

enter image description here

39voto

Robbert Puntos 1408

YouTube es el uso del HTML5 Historia de la API para agregar y quitar la Url de la página a la historia de la pila. Esto se traduce en cambiar la URL en la barra de direcciones y los botones atrás/adelante de trabajo, mientras que todavía en realidad la carga de la página a través de JS (ajax).

La forma más fácil de implementar la API con la compatibilidad hacia atrás en este punto es mediante el uso de History.js. Por compatibilidad hacia atrás, me refiero a caer de vuelta a la etiqueta de hash método para navegadores antiguos que no soportan HTML5 Historia de la API todavía.

Retirar el History.js demo!

Creo que Twitter es probablemente el ejemplo más conocido de un sitio web mediante el hash de la Url. Por ejemplo twitter.com/#!/username ha sido una visión común para años. El problema con este método es que las etiquetas de hash son el lado del cliente, por lo tanto es necesario JS a leer y servir el contenido adecuado. Cualquier no-JS usuario hace clic en una URL oculta acaba de aterrizar en Twitter en la página de inicio.

Beatport fue uno de los primeros de los principales sitios web utilizando HTML5 Historia de la técnica por el camino. SoundCloud ha puesto en marcha recientemente. Ambos sitios necesarios HTML5 Historia mal, para asegurar la reproducción de audio, mientras que los visitantes navegar a través de las páginas.

7voto

xguox Puntos 186

mirando este demo, tal vez podría ayudar a usted, y mire los comentarios, algunos dicen agradable, mientras que algunos dicen que es demasiado complicado para lograrlo

html:

<div>
  <dt></dt>
  <dd></dd>
</div>

css:

#progress {
    position: fixed;
    z-index: 2147483647;
    top: 0;
    left: -6px;
    width: 1%;
    height: 2px;
    background: #0088CC;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -moz-transition: width 500ms ease-out,opacity 400ms linear;
    -ms-transition: width 500ms ease-out,opacity 400ms linear;
    -o-transition: width 500ms ease-out,opacity 400ms linear;
    -webkit-transition: width 500ms ease-out,opacity 400ms linear;
    transition: width 500ms ease-out,opacity 400ms linear;
}


#progress dd, #progress dt {
    position: absolute;
    top: 0;
    height: 2px;
    -moz-box-shadow: #0088CC 1px 0 6px 1px;
    -ms-box-shadow: #0088CC 1px 0 6px 1px;
    -webkit-box-shadow: #0088CC 1px 0 6px 1px;
    box-shadow: #0088CC 1px 0 6px 1px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

#progress dt {
    opacity: .6;
    width: 180px;
    right: -80px;
    clip: rect(-6px,90px,14px,-6px);
}

#progress dd {
    opacity: .6;
    width: 20px;
    right: 0;
    clip: rect(-6px,22px,14px,10px);
}  

js:

$(document).ajaxStart(function() {
//only add progress bar if added yet.
  if ($("#progress").length === 0) {
    $("body").append($("<div><dt/><dd/></div>").attr("id", "progress"));
    $("#progress").width((50 + Math.random() * 30) + "%");
  }
});

$(document).ajaxComplete(function() {
//End loading animation
    $("#progress").width("101%").delay(200).fadeOut(400, function() {
      $(this).remove();
    });
});

5voto

Olim Saidov Puntos 387

Tienen anunciar una biblioteca que se utiliza para la navegación dinámica llamada stfjs.

Estructurado Página de Fragmentos o SPF, para abreviar - es un marco ligero que se encarga de la navegación y las actualizaciones de las secciones de la página. Mediante la mejora progresiva y HTML5, SPF a la perfección las actualizaciones de las páginas con el procesamiento del lado del servidor. Sólo fragmentos de documento se envían, y de las correspondientes secciones de la página se actualiza de forma asincrónica cuando recibió.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X