datatype - response php ajax

php/Ajax: la mejor práctica para precargar imágenes

Question

He creado un script que se parece mucho a la característica de photostream de flickr. Dos miniaturas una al lado de la otra, y cuando hace clic en los enlaces siguientes o previos, aparecen las siguientes (o anteriores) dos imágenes. ¡Genial!

Actualmente, cuando la página se carga, carga las dos imágenes. La primera vez que se utiliza nxt / prv, las dos imágenes siguientes o las dos anteriores se cargan a través de ajax, con el ID de la primera imagen que se pasa en la url y el HTML de las dos nuevas imágenes devueltas y visualizadas a través de ajax.

bastante simple, pero me hizo pensar, en una conexión lenta, o en una pesada carga de servidor, entonces las dos imágenes, aunque las miniaturas relativamente pequeñas aún pueden tardar un tiempo en cargarse, y lo bueno con los paneles deslizantes es el hecho de que los datos ocultos se desliza de forma rápida y suave, preferiblemente sin un retraso de carga.

Entonces, desde el punto de vista de rendimiento y buenas prácticas, me pregunto qué opción es mejor, esto es lo que puedo pensar por ahora, abierto a sugerencias.

1, llame a cada conjunto de imágenes a través de JSON (se supone que es rápido?)

2, cargue todas las imágenes posibles en un archivo json y obtenga los detalles de esa manera, aunque el navegador aún tendrá que cargar la imagen. ¡Además, a veces puede haber 4 imágenes, otras veces podría haber hasta 1000!

3, cargue 10 imágenes a través de php en un Json u otro archivo, y cargue las 10 imágenes en el navegador ocultando las 8 que no se muestran, y siempre mostrando las dos del medio. El problema aquí es que cada vez que alguien hace clic, el archivo tiene que volver a cargar la primera y la última imagen, lo que aún ocupa tiempo, aunque supongo que las imágenes del medio ya se habrán guardado en caché a través del navegador. Pero aún hay un tiempo de carga.

4, ¿Es posible tener una imagen json con todos los detalles de la imagen (independientemente de los números) y no usar 3 arriba para cargar 10 de esas imágenes, es posible usar ajax para leer solo 10 líneas y mantener un puntero de la última ¡uno lo leyó, así que el archivo json se puede cargar rápidamente, actualizar brevemente y las imágenes de ambos lados se guardan en caché a través del navegador!

Espero que sea claro, ¿alguna sugerencia sobre cómo manejarías esto?

Answer 1

La obtención de JSON a través de Ajax simplemente lo hará más lento.

Es mejor utilizar JSON en línea y Javascript generado.

 <?php 
       $images = array( "foo.jpg","bar.jpg" ); 
 ?>
 <script type="text/javascript">
   jQuery(function($){
       var images = ( <?php echo json_encode($images); ?> ); 
       /* Creating A Hidden box to preload the images into */
       var imgbox = document.createElement("div"); 
       $(imgbox).css({display: ''none''});
       /* Possible Alternative trick */
       /* $(imgbox).css({height:1px; width: 1px; overflow: hidden;}); */
       $(''body'').append(imgbox);

       $.each( images , function( ind, item ) 
       {
          #Injecting images into the bottom hidden div. 
          var img = document.createElement("img"); 
          $(img).src("/some/prefix/" + item ); 
          $(imgbox).append(img);
       });
    }); 
 </script>

Answer 2

Para precargar una imagen desde Javascript, no necesita hacer nada que suene como AJAX o JSON. Todo lo que necesitas es esto:

var img = new Image();
img.src = "http://example.com/new/image.jpg";

El navegador cargará felizmente la imagen en segundo plano, aunque no se muestre en ningún lado. Luego, cuando actualice el campo src de otra etiqueta de imagen (visualizada), el navegador mostrará inmediatamente la parte de la imagen que ya está cargada (esperemos que todo).

Answer 3

En el caso en que desee precargar simultáneamente una mayor cantidad de recursos, un pequeño ajax puede resolver el problema por usted. Solo asegúrese de que los encabezados de almacenamiento en caché sean tales que el navegador use los recursos en la próxima solicitud. En el siguiente ejemplo, cargo hasta cuatro recursos al mismo tiempo.

<script>
var urls = [
  "a.png",
  "b.png",
  "c.png",
  "d.png",
  "e.png",
  "f.png"
];

var currentStep = 0;
function loadResources()
{
  if(currentStep<urls.length){
  var url = urls[currentStep];
  var req = GetXmlHttpObject();
  update(''loading '' + url);
  req.open("GET", url, true);
  req.onreadystatechange = getUpdateState(req, url);
  req.send(null);
} else {
  window.location = ''done.htm'';
}
}

function getUpdateState(req, url) {
  return function() {
    var state = req.readyState;
    if (state != 4) { return; }
    req = null;
    setTimeout(''loadResources()'', 0);
  }
}
</script>

<!-- This will queue up to four concurrent requests.  Modern browsers will request up to eight images at time  -->
<body onload="javascript: loadResources(); loadResources(); loadResources(); loadResources();">

Answer 4

¿Por qué no usar texto y reemplazar el texto con un código de imagen (funciona en php realmente bueno con ajax de hasta 500 imágenes y más)?