php / Ajax - Best Practice für Vorbelastung Bilder

Question

Ich habe zusammen ein Skript gesetzt, die wie die flickr Fotostream-Funktion sehr viel. Zwei Thumbnails nebeneinander, und wenn Sie auf die nächste oder vorherige Links die nächste (oder vorherige) zwei Bilder gleiten in. Cool!

Zur Zeit beim Laden der Seite lädt es die beiden Bilder. Der erste Mal nxt / PRV verwendet dann die nächsten zwei Bilder oder vorherig beide sind über Ajax geladen, mit der ID des ersten Bild wird in der URL und der HTML-Code für die beiden neuen Bilder zurückgegeben und angezeigt über Ajax weitergegeben.

einfach genug, aber es hat mich zu denken, über eine langsame Verbindung oder schwere Serverbelastung dann die beiden Bilder, obwohl relativ kleine Thumbnails könnten noch eine Weile dauern, zu laden, und die netten Dinge mit Schiebescheiben sind die Tatsache, dass die versteckten Daten Dias in schnell und reibungslos preferbly ohne Ladeverzögerung.

So wurde ich von einer Leistung fragen und gute Praxis Sicht der Option am besten ist, das ist, was ich jetzt von denken, offen für Vorschläge.

1, rufen Sie jeden Satz von Bildern über JSON (sein sollte schnell sein?)

2, laden alle möglichen Bilder in eine JSON-Datei und ziehen Sie in die Details, die Art und Weise - obwohl Browser Standbild laden müssen. Plus manchmal könnte es 4 Bilder sein, es zu anderen Zeiten bis zu 1000 sein könnten!

3, laden 10 Bilder per php in eine Json oder eine andere Datei und laden alle 10 Bilder in den Browser die 8 versteckt, die nicht auf der Messe sind, und immer in der Mitte zwei zeigt. Problem hier ist, dass jedes Mal, wenn jemand die Datei hat die ersten und letzte Bilder zu laden, die Zeit in Anspruch nimmt nach wie vor, obwohl ich nehme die mittleren Bilder haben inzwischen alle obwohl über den Browser im Cache gespeichert worden ist. Aber noch gibt es eine Ladezeit.

4 ist es möglich, ein json Bild mit allen Bilddetails zu haben (unabhängig von Zahlen) und keine 3 oben verwenden 10 diese Bilder zu laden, ist es möglich, Ajax zu verwenden, nur 10 Zeilen lesen und hält einen Zeiger sie lasen die letzten, so kann die jSON-Datei schnell geladen werden, kurzer Auffrischung und Bilder auf jeder Seite über den Browser !!

zwischengespeichert

Hope, das ist klar, irgendwelche Vorschläge, wie Sie damit umgehen würde?

Answer 1

Um ein Bild von Javascript vorzuladen, brauchen Sie nichts weiter zu tun, die wie AJAX oder JSON klingt. Alles, was Sie benötigen, ist dies:

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

Der Browser wird ganz glücklich das Bild im Hintergrund laden, obwohl es überall nicht angezeigt wird. Dann, wenn Sie das src Feld eines andere (angezeigt) Bild-Tages aktualisieren, wird sofort der Browser den Teil des Bildes zeigt es bereits geladen wird (hoffentlich alles).

Answer 2

Fetching JSON Via Ajax werden Sie nur verlangsamen.

Sie sind besser mit Inline-JSON und erzeugt Javascript.

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

Für den Fall, Sie wollen gleichzeitig Vorspannung eine größere Anzahl von Ressourcen, ein wenig Ajax das Problem für Sie lösen kann. So stellen Sie sicher, dass die Caching-Header so sind, dass der Browser die Ressourcen auf die nächste Anforderung verwenden. Im folgende Beispiel, lade ich zu vier Ressourcen gleichzeitig auf.

<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

Warum Text nicht verwenden und den Text mit einem Bild-Code (funktioniert in PHP wirklich schön mit Ajax bis zu 500 Bildern und mehr) ersetzen?