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.