Precarga de todos los activos

Question

Precarga de todos los activos

¿Existe una única forma universal de cargar todos los activos antes de usarlos? Quiero cargar algunas imágenes, archivos de audio y algunos archivos .swf antes de que se inicie mi aplicación. Actualmente, cargo las imágenes creando nuevos elementos <img> y estableciendo el src a la ruta de la imagen, para los archivos de audio agrego el atributo preload="auto" en la etiqueta <audio> y realizo una solicitud ajax para cargar los .swfs.

Hay algún problema (re algunos navegadores no caching etc.) con la forma en que estoy cargando mis archivos ¿y hay una forma de "mejores prácticas" de precarga colectiva de todos estos tipos de archivos antes de mostrar mi contenido?

26

javascript jquery html5 preload

Author: alh, 2013-12-24

Source

5 answers

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 de 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, script y archivos de 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.

24

Author: Tony Jose,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-30 13:26:24

Puede usar una biblioteca PreloadJS (es parte de CreateJS suite). Es ligero, fácil de usar y bastante potente en términos de configuración. Permite hacer cola, conexiones múltiples, pausar, etc. Ofrece acceso a eventos (de progreso, completos, etc.).

Si tiene alguna experiencia en Actionscript, esta herramienta debería ser bastante sencilla para usted.

1

Author: strah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-27 13:05:25

Intenta usar $(window).load(function(){ /* Use any of your resources */ });.

Probé esto y trabajé para mí. esto . Dado que esta es una api de javascript simple, también puede usar como window.onload=function(){/* JavaScriptCode */}; creo.

1

Author: Siva Tumma,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-27 14:57:17

He estado muy contento con PxLoader: http://thinkpixellab.com/pxloader /

Es un preloader extremadamente fácil de usar y ligero para usar en aplicaciones HTML5. Puede descargar imágenes, audio o cualquier otro tipo de archivo. También le permite monitorear los eventos completados.

Es de uso gratuito (licencia MIT) y forkable en GitHub.

Hay algunas buenas demos y ejemplos de guiones aquí: http://thinkpixellab.com/pxloader/#sample1

0

Author: Bangkokian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-28 10:15:16

score 37 · Accepted Answer

Sí. En realidad, esto se ha convertido en un estándar. Aquí está el RFC pertinente. Un movimiento para estandarizar esto para HTML5 es en works

La mayoría de los navegadores modernos admiten prefetching. Aquí hay un breve resumen de cómo se usan:

Firefox

Según MDN, puede usar las etiquetas <link> en el encabezado del documento,

<link rel="prefetch" href="/assets/my-preloaded-image.png">

Así como establecer el encabezado HTTP Link con la solicitud, o dentro del HTML como una etiqueta meta.

Link: </assets/my-preloaded-image.png>; rel=prefetch
<meta http-equiv="Link" content="</assets/my-preloaded-image.png>; rel=prefetch">
enter code here

No solo esto, sino también puede dar consejos de navegación dentro de la página, como lo que será la siguiente página, etc.

<link rel="next" href="2.html">

ES DECIR, 11

En Internet Explorer también está el encabezado Prefetch. Puedes establecer así:

<link rel="prefetch" href="http://example.com/style.css" />

Incluso puede prefetch (pre-resolver) consultas DNS

<link rel="dns-prefetch" href="http://example.com/"/>

O, prerender una página web (a-la Google Instant)

<link rel="prerender" href="http://example.com/nextpage.html" />

Cromo

Chrome también hace las mismas cosas que Firefox e IE en esto regard .

Safari

No he sido capaz de encontrar una prueba sólida de si Safari soporta estas cosas. Pero leyendo sobre muchas fuentes, sospecho que lo hacen, solo que probablemente Apple no está tan ansioso por comercializar Safari como Microsoft está empujando IE11 (solo una opinión).

Diviértete. :)

Fuentes:

Actualizar: Después de compilar esta respuesta, me topé con una respuesta similar en SO, que da más detalles sobre el tema. Por favor, eche un vistazo.

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