php / Ajax - Best practice per il precaricamento delle immagini

Question

Ho messo insieme uno script che è molto simile alla funzione photostream di flickr. Due anteprime una accanto all'altra e quando si fa clic sul collegamento successivo o precedente, vengono inserite due immagini successive (o precedenti). Fantastico!

Attualmente quando la pagina viene caricata vengono caricate le due immagini. La prima volta che si utilizza nxt / prv, le due immagini successive o le due precedenti vengono caricate tramite ajax, con l'ID della prima immagine passato nell'URL e l'HTML per le due nuove immagini restituite e visualizzate tramite ajax.

abbastanza semplice, ma mi ha fatto pensare, su una connessione lenta o su un carico pesante del server, quindi le due immagini, anche se le miniature relativamente piccole potrebbero ancora impiegare un po 'a caricarsi, e le cose belle con i riquadri scorrevoli sono il fatto che i dati nascosti scorrono rapidamente e senza intoppi preferibilmente senza un ritardo di caricamento.

Quindi, dal punto di vista delle prestazioni e delle buone pratiche, mi chiedevo quale sia l'opzione migliore, questo è ciò a cui posso pensare per ora, aperto a suggerimenti.

1, chiama ogni set di immagini tramite JSON (dovrebbe essere veloce?)

2, carica tutte le immagini possibili in un file json e inserisci i dettagli in questo modo, anche se il browser dovrà comunque caricare l'immagine. Inoltre a volte potrebbero esserci 4 immagini, altre volte potrebbero essercene fino a 1000!

3, Carica 10 immagini tramite php in un file Json o altro e carica tutte le 10 immagini nel browser nascondendo le 8 che non sono in mostra e mostrando sempre le due centrali. Il problema qui è che ogni volta che qualcuno fa clic, il file deve ricaricare la prima e l'ultima immagine, il che richiede ancora tempo, anche se suppongo che le immagini centrali saranno state tutte memorizzate nella cache tramite il browser ormai. Ma c'è ancora un tempo di caricamento.

4, È possibile avere un'immagine json con tutti i dettagli dell'immagine (indipendentemente dai numeri) e utilizzare il numero 3 sopra per caricare 10 di quelle immagini, è possibile usare Ajax per leggere solo 10 righe e mantenere un puntatore dell'ultimo che ha letto, quindi il file json può essere caricato velocemente, un breve aggiornamento e le immagini su entrambi i lati vengono memorizzate nella cache tramite il browser !!

Spero sia chiaro, qualche suggerimento su come lo gestiresti?

Answer 1

Per precaricare un'immagine da Javascript, non è necessario fare nulla che suoni come AJAX o JSON. Tutto ciò che serve è questo:

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

Il browser caricherà abbastanza felicemente l'immagine sullo sfondo, anche se non viene visualizzata da nessuna parte. Quindi, quando aggiorni il campo src di un altro tag immagine (visualizzato), il browser mostrerà immediatamente la parte dell'immagine che è già caricata (si spera tutto).

Answer 2

Il recupero di JSON tramite Ajax ti rallenterà.

Stai meglio usando JSON inline e Javascript generato.

 <?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

Nel caso in cui desideri contemporaneamente precaricare un numero maggiore di risorse, un po 'di ajax può risolvere il problema per te. Assicurati solo che le intestazioni della cache siano tali che il browser utilizzerà le risorse nella richiesta successiva. Nel seguente esempio, carico fino a quattro risorse contemporaneamente.

<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

Perché non usare il testo e sostituirlo con un codice immagine (funziona in php davvero bene con ajax fino a 500 immagini e più)?