php / Ajax - Mejores prácticas para precargar imágenes

Question

He creado un script que se parece mucho a la función de secuencia de fotos de flickr. Dos miniaturas una al lado de la otra, y al hacer clic en el enlace siguiente o anterior, se deslizan las dos imágenes siguientes (o anteriores). ¡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 la identificación de la primera imagen que se pasa en la url y el HTML para las dos nuevas imágenes devueltas y mostradas a través de ajax.

Lo suficientemente simple, pero me hizo pensar, en una conexión lenta, o en una gran carga del servidor, entonces las dos imágenes, aunque las miniaturas relativamente pequeñas aún podrían tardar un poco en cargarse, y lo bueno de los paneles deslizantes es el hecho de que los datos ocultos se deslizan de forma rápida y fluida, preferiblemente sin demora de carga.

Desde un punto de vista de rendimiento y buenas prácticas, me preguntaba qué opción es la mejor, esto es en lo que puedo pensar por ahora, abierto a sugerencias.

1, llama 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 todavía tendrá que cargar la imagen. Además, a veces puede haber 4 imágenes, otras veces puede haber hasta 1000!

3, carga 10 imágenes a través de php en un archivo Json u otro, y carga 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 toma tiempo, aunque supongo que las imágenes del medio ya se habrán almacenado en caché a través del navegador. Pero todavía 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 usar el número 3 de arriba para cargar 10 de esas imágenes? ¿es posible usar ajax para leer solo 10 líneas y mantener un puntero? del último que leyó, por lo que el archivo json se puede cargar rápidamente, se actualiza brevemente y las imágenes de ambos lados se almacenan en caché a través del navegador.

Espero que esté claro, ¿alguna sugerencia sobre cómo manejaría esto?

Answer 1

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á alegremente la imagen en segundo plano, aunque no se muestre en ningún lugar. Luego, cuando actualice el campo src de otra etiqueta de imagen (mostrada), el navegador mostrará inmediatamente la parte de la imagen que ya está cargada (con suerte, toda).

Answer 2

Recuperando JSON a través de Ajax solo te ralentizará.

Es mejor usar 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 3

En el caso de que desee al mismo tiempo cargar una mayor cantidad de recursos, un poco de ajax puede resolver el problema por usted. Solo asegúrese de que los encabezados de almacenamiento en caché sean tales que el navegador usará 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 bien con ajax hasta 500 imágenes y más)?