¿Cómo puedo precarga una página usando HTML5?

Algunos agentes de usuario pueden optar por la precarga cuando esto está presente, pero no puede apostar por ello.

<link rel="next" href="http://www.example.com/link-reference">

Esto podría no ser una buena respuesta a la pregunta, pero solo para la info InstantClick.js puede precarga sus enlaces antes de que realmente haga clic en él.

¿Cómo funciona

Antes de que los visitantes hagan clic en un enlace, pasan el cursor sobre ese enlace. Entre estos dos eventos, 200 ms a 300 ms por lo general pasan. InstantClick hace uso de ese tiempo para precarga de la página, de modo que la página ya está allí cuando se hace clic.

Hay un par de maneras en las que puedes precarga una página:

• DNS prefetching le dice al navegador que se necesitarán algunos de los recursos de otro dominio, para que pueda resolver el DNS lo más rápido posible. Para ello, hay que añadir <link rel="dns-prefetch" href="//example.com"> en el del documento. Esto podría ser útil si necesita usar elementos de partido 3-rd.
• Preconnect lo lleva un paso más allá y no solo resuelve DNS, sino que también hace un enlace TCP y si preconnect a https hará una negociación TLS. En el encabezado hay que añadir <link rel="preconnect" href="https://example.com/">
• Prefetch descarga el recurso y lo almacena en la caché del navegador para usarlo más tarde. Puedes hacer <link rel="prefetch" href="imgs/image.png">. Tenga en cuenta que esto depende del navegador para decidir si tiene sentido descargar el recurso (podría ignorarlo)
• Prerender es la opción más poderosa. Le dice al navegador que solicite la url y descargue todos los activos. <link rel="prerender" href="http://example.com/page">. Deberías estar bastante seguro de que la persona abrirá la página, de lo contrario solo perderá su ancho de banda.

La pre-codificación de los activos, es una de las tareas más difíciles y simples en un proyecto FLASH o HTML5 porque hemos hecho proyectos de conversión de FLASH a HTML5.

Los tipos más fáciles de precargadores son los precargadores estáticos utilizados para cargar la película en la que existen. Para estos precargadores, todo lo que necesita hacer es detener la película en una pantalla del precargador, generalmente el primer fotograma de la película, y mantenerla allí hasta que pueda determinar que la película se ha cargado completamente en el Flash jugador.

El precargador también detiene cualquier parpadeo o retraso al cambiar imágenes no almacenadas en una página web, ya que la misma imagen debe descargarse del servidor cada vez que sea necesario mostrarla.

Hemos usado jQuery HMTL5 Loader en nuestras aplicaciones web(HTML5), puedes ver el Repositorio Github aquí.

Este plugin necesita un archivo JSON para obtener los archivos que tiene que precargar, y puede precargar imágenes, fuentes de video y audio html5, archivos de script y texto. Además de esto, tiene un tipo diferente de cargadores (circulares, de línea, de contador grande, etc.)y características adicionales, etc.

Se implementa así.

<script>
    var loaderAnimation = $("#html5Loader").LoaderAnimation();
    $.html5Loader({getFilesToLoadJSON:'json file',
        onUpdate: loaderAnimation.update,
        debugMode:false
    });
</script>

Funciona perfectamente en diferentes navegadores como Chrome, FireFox, Safari, Opera, etc. y en navegadores móviles.

Nota: Hemos utilizado esto para nuestras aplicaciones web HTML5 que se ejecutan en diferentes plataformas, incluyendo Android e iOS.