Quiero cargar varias imágenes muy rápido en un sitio web, ¿cuál es el mejor método?

Question

ACTUALIZACIÓN: Esta pregunta es obsoleta, por favor ignore

Así que .. mi idea es cargar una manga llena/cómics a la vez, con una barra de progreso incluido, y hacer una especie de corriente, como:

• mi página carga la base (HTML + CSS + JS) (por supuesto)
• Como se ha hecho, comienzo a cargar los IMG (las direcciones URL se almacenan en JS var) de mi servidor, una vez (o alguna forma más rápida) para que pueda hacer una especie de barra de progreso.
• ALTERNATIVA: ¿Hay alguna manera de cargar un archivo de compresión con todos los archivos IMG y descomprimir en el navegador?
• ALTERNATIVA: Yo también estaba pensando en el ahorro de entonces como cadenas y luego decodificar, que son en su mayoría .jpg
• Las imágenes no tienen que mostrar de inmediato, sólo necesito la devolución de llamada cuando se hacen.

XTML y HTML5 es aceptable

¿Cuál es la manera más rápida para cargar una serie de imágenes para mi sitio web?

EDITAR Desde comentario @Oded .. la pregunta es realmente lo que es la mejor tecnología para cargar las imágenes y el usuario no tenga que esperar cada vez que se enciende la 'página'. Apuntando a una experiencia más similar, como cuando lees cómics en la vida real.

Edit2 Como algunas personas me ayudó a comprender, estoy buscando un pre-loader en los esteroides

Edit3 No hay técnicos de CSS harán

Answer 1

Si divide imágenes grandes en partes más pequeñas, se cargarán más rápido en los navegadores modernos debido a la canalización.

Answer 2

ALTERNATIVA: ¿Existe una forma de cargar un archivo de compresas con todos los archivos IMG y descomprimir en el navegador?

Los formatos de imagen ya están comprimidos. No ganarías nada al coser e intentar comprimirlos aún más.

puede simplemente pegue las imágenes y use background-position para mostrar diferentes partes de ellas: esto se llama 'spriting'. Pero spriting es principalmente útil para imágenes más pequeñas, para reducir el número de solicitudes HTTP al servidor y reducir algo la latencia; para imágenes más grandes, como las páginas manga, el beneficio no es tan grande, posiblemente superado por la necesidad de buscar una imagen gigante de una vez, incluso si el usuario solo va a leer las primeras páginas.

ALTERNATIVA: Yo también estaba pensando en el ahorro de entonces como cadenas y luego decodificar

Lo que habría que lograr? La transferencia como cadena sería, en la mayoría de los casos, considerablemente más lenta que el binario en bruto. Luego, para obtener cadenas de JavaScript en imágenes, deberá usar las URL data:, que no funcionan en IE6-IE7, y están limitadas a la cantidad de datos que puede poner en ellas. De nuevo, esto está destinado principalmente para imágenes pequeñas.

Creo que todo lo que realmente quieres es un preloader de imágenes estándar de pantano.

Answer 3

Como se ha hecho, comienzo a cargar los IMG (los URL se almacenan en JS var) de mi servidor , una vez (o alguna más rápido manera) para que pueda hacer una especie de progreso bar.

Su navegador ya descarga el HTML primero, así es como sabe cargar cualquier JS/imágenes que haga referencia. Está intentando inventar algo que ya existe.

Solo asegúrate de que tu manga esté compuesta por muchas imágenes de un tamaño conocido, que especifiques en tus etiquetas img. La mayoría de los navegadores tienen algún tipo de barra de progreso para mostrar que está cargando recursos para usted. No va a hacer que la carga de imágenes grandes sea más rápida a menos que mejore la velocidad a la que el servidor las atienda o la conexión a Internet de su usuario, o las comprima para reducir sus archivos de imagen (probablemente a costa de la calidad de imagen).

Answer 4

Se puede cargar previamente las imágenes en JavaScript usando:

var x = new Image(); 
x.src = "someurl"; 

Esto funcionaría como el que usted describe como "guardar la imagen en las cadenas".

Answer 5

Nota: JPG y PNG ya están comprimidos.

Puede intentar usar una técnica de "sprites CSS". Básicamente, la idea es usar tu programa favorito de edición de imágenes para unir todas tus imágenes en una sola imagen. Es más rápido enviar esto porque pierde la sobrecarga por archivo en términos de codificación de la imagen y envío de la imagen. En el lado del cliente, utiliza CSS para seleccionar solo la parte de la imagen total que se usa en cualquier lugar.

http://www.alistapart.com/articles/sprites/
http://www.fiftyfoureleven.com/weblog/web-development/css/css-sprites-images-optimization

Y/O

Puede utilizar la carga diferida para cargar imágenes sólo cuando vienen a la vista.
http://www.appelsiini.net/projects/lazyload

Answer 6

aquí hay algo que puede realizar, que por casualidad acabo codificado por:

(function() { 
    var imgs = [ "image1.png", "image2.png", ... /* all your image names */ ], 
    index = 0, 
    img; 

    function loader() { 
    if (index >= imgs.length) return; 
    (img = new Image()).onload = loader; 
    setTimeout(function() { img.src = "/path/to/images/" + imgs[index++]; }, 1); 
    } 

    loader(); 
})(); 

Plop todos sus nombres de imagen (o las que desee para cargar previamente) en la matriz, y asegurarse de que esto script se inicia cuando sus páginas comienzan a cargarse. Recorrerá la lista de imágenes, las cargará y luego pasará a la siguiente cuando termine cada imagen. (La llamada setTimeout es para asegurarse de que el manejador "onload" no reciba una llamada cuando aún está dentro de un controlador.)

Probablemente quiera hacer esto para muchos de los "tornillos y tuercas" imágenes para todo su sitio; en otras palabras, cada página intenta cargar imágenes para todo. Una vez que están en el caché, por supuesto, esto no tomará una cantidad significativa de tiempo. Alternativamente, podría ejecutar esta secuencia de comandos solo en un par de páginas, como pantallas de "inicio de sesión" y la página principal "inicio".Por supuesto, si usted tiene un sitio como Flickr, entonces es probable que no quieren cargar previamente todos sus imágenes :-)

Answer 7

Image preloaders han existido por siglos. Usted realmente no necesita cargar todos a la vez, puede hacerlo en la demanda [cuando la persona que carga la página siguiente, se puede recuperar la imagen después de que]

Answer 8

spriting

Sólo echar un vistazo cómo lo hace facebook: http://b.static.ak.fbcdn.net/rsrc.php/z3JQK/hash/11cngjg0.png

Una imagen que carga MÁS RÁPIDAMENTE que series de imágenes pequeñas. Para mostrar el icono, simplemente crea un div con dimensiones fijas y mueve el fondo dentro de él. Tu div funciona como una ventana gráfica para la imagen grande. Utiliza la posición de fondo para moverse a la parte apropiada de la imagen. Todo lo demás está oculto.

diferentes dominios

algo que probablemente no sabía - Internet Explorer tiene un límite de conexiones por servidor. Puede leer sobre esto aquí: http://support.microsoft.com/?scid=kb;en-us;183110&x=17&y=11 (here are exact numbers).

Qué significa: si el usuario está utilizando IE7, podrá cargar SOLO 4 (o 2) archivos al mismo tiempo desde su servidor, independientemente de la velocidad de su conexión a Internet.

Para acelerar las cosas, puede crear algunos subdominios: servidor1.midominio.com, servidor2.dominio.com, servidor.midominio.com, etc. - y luego el usuario puede descargar muchos archivos mucho más rápido, porque utiliza diferentes hosts para servir diferentes archivos

Answer 9

• Mi página carga la base (HTML + CSS + JS) (por supuesto)
• Como se ha hecho, comienzo a cargar los IMG (las direcciones URL se almacenan en JS var) a partir de mi servidor , uno por vez (o una forma más rápida) para que pueda hacer una especie de barra de progreso.
• Las imágenes no tienen que mostrarse de inmediato, solo necesito la devolución de llamada cuando hayan terminado.

Si desea cargar 10 imágenes tan rápido como sea posible, colocar 10 <img> etiquetas en la página, uno para cada imagen. Use Javascript para ocultar toda la imagen, excepto la vista actualmente; agregue los enlaces siguiente/posterior que usan JS para ocultar la imagen actual y mostrar la siguiente. Muchos navegadores ya tienen algún tipo de barra de progreso, y al hacer cosas con el viejo HTML normal, funcionará correctamente.

Está intentando reinventar toda esta funcionalidad con Javascript sin ningún motivo justificado. No lo vas a hacer mejor que el navegador.

Dicho todo esto, esta es probablemente una mala idea. Puede descargar 15MB de páginas de cómic en la ventana del navegador para que el usuario se vaya después de leer la primera página. En lugar de tratar de precargar todas las imágenes, debe usar JS para mantener siempre la página siguiente (o dos) precargadas, no toda la cosa.