Rendimiento precarga imagenes ajax vs iframe

[matake]

Hola,

Escenario:
Quiero que el usuario reciba una pagina sencilla (por la rapidez de carga) y una vez cargada esta pagina quiero que haga otra petición para cargar imágenes ( ver muchas imágenes ) y mostrarlos al visitante según estos van cargando.

He resuelto esto mediante ajax con jquery deffered, donde al cargar cada imagen se le puede poner un callback para que la misma sea colocada en la pagina que el usuario ya tiene cargada.

Lo que pasa es que luego me di cuenta que esto entra en contradicción con otros consejos que he leído diciendo que es mejor hacer menos peticiones posibles al servidor porque por cada imagen se hace otra petición ( a no ser que yo no he entendido bien como funciona).

Otra opción seria juntar las imágenes y recibirlas todas en una petición ajax pero esto tiene el inconveniente de no poder llamar al callback por cada foto por separado si no solo cuando todas han cargado.

He pensado en otra opción en cargar las imágenes en un iframe y añadir al atributo onload una llamada a un callback para ser mostrada en la pagina principal una vez cargada la imagen.

Me di cuenta igual ( según he leído ) que por cada etiqueta img se hace una petición separada al servidor, entonces esta opción tampoco cumple con el consejo de hacer cuanto menos peticiones al servidor.

Entonces he pensado en quedar con lo del iframe pero en vez de poner la dirreccion de la foto en el atributo src del img ponerla codificada en base64.
De este modo las imágenes quedarían embebidas en una sola pagina ( o sea una sola petición ) y ademas según va cargando cada una llamara a la funcion callback para colocarla en la pagina del usuario

Código:

<img src="data:image/png;base64, mi_imagen_codificada_en_base64" onload="funcion_para_colocar_foto_en_pagina_parent();">

Mi pregunta es :

¿Mejoraria esto el rendimiento de algun modo?

P.D
Claro esta que por seguridad dejo tambien la opcion ajax defered por si algun cliente no soporta iframe.

Saludos y gracias por anticipado.

[Pelipe]

Hola matake, soy de Bolivia,

Justamente casi la misma inquietud me preocupaba estos dias en un proyecto:

- realmente no se cual de esos dos metodos funciones más rapido.
- me voy por otra solucion.
- imagina que tengo 2 columnas de un catalogo de productos por 20 filas.
- lo que voy a hacer es que solo carguen las imagenes que sean visibles en pantalla
- si digamos el usuario no llega a ver el final de la pagina, esas imagens de el catalogo no se van a cargar, en su lugar habra una imagen de un reloj cargando ¿me dejo entender?
- ¿en que beneficia? pues ahorras ancho de banda.
- pero seria mejor tener esas imagenes en un CDN para que la experiencia de el usuario sea de lo mejor, igual no se como andara funcionando en un hosting compartido normal(si funcionan pero dependera de la saturacion de tu servidor)


- tu duda acerca de varias consultas al servidor es un poco tonta segun mi parecer, porque la consulta es minima y luego lo que importa es la imagen del catalgo que va a cargar que sera de 20kb a 120 kb por ejemplo(la peticion al servidor),
- ...entonces no te preocupes por la peticion de consulta al servidor si puedes ahorrarte 500KBs en imagenes que quizas no se vera el usuario. (la interaccion entre usuario y tu pagina sera mejor)

Aqui hay un ejemplo de lo que venia diciendo, catalogo de imagenes cargandose segun vayas viendo:

- https://wrapbootstrap.com

La solución es un plugin para jquery llamado:Jquery Async Image Loader (JAIL)
puedes descargarlo en: https://github.com/sebarmeli/JAIL trae mas de 10 ejemplos de su uso, con iframes y ajax que decias.

Espero te haya servido, saludos cordiales.

[matake]

Hola Pelipe, gracias por responder,

Principalmente, de tu respuesta me quedo con lo del CDN.

-Lo de cargar las fotos de la primera pagina visible ya lo tenia planeado pero olvide ponerlo en mi escenario
gracias de todos modos por recordarmelo.

Por la naturaleza de mi proyecto el ancho de banda no seria un problema o sea prefiero que las imágenes lleguen ,aunque no todos los usuarios hacen scroll vertical, pero los que hacen van a tener la impresión que la carga es mas rápida.
(O sea tampoco quiero cargar todas las fotos si son muchas pero al menos una pagina (vertical) por adelantado del scroll actual)

tu duda acerca de varias consultas al servidor es un poco tonta según mi parecer

Pues como ya he dicho he llegado a tener esta duda leyendo y leyendo consejos de las cuales la mayoría en primer lugar ponen esto "Realiza pocas peticiones HTTP"

Es mas se aconseja (dentro de lo posible) mejor tener los javascript css y html minificados.
Ademas los javascript embedidos en las etiquetas <script> y no llamarlos por <script src. También para los estilos.
De esto no tengo ninguna duda ( mira el código fuente de google y te convencerás que no llama a ningún script externo o hoja de estilo TODO esta en el head de la misma pagina).


Lo que yo quiero es dar otra "vuelta de tuerca" con las fotos.

.....

En fin , gracias de todos modos por responder pero me quedo con la duda.

Cualquier otra opinión sera bienvenida

Saludos