Dynamische JavaScript Diashow

Question

Ich habe eine JavaScript Diashow dass Vorbelastungen Bilder aus einer MySQL-Datenbank und zeigt sie dann einen nach dem anderem in einem Image-Tag im HTML-Dokument. Kurz gesagt: Dies wird durch Vorladen Bilder wie viele Diashow Tutorials im Internet zeigen, sondern statische Bilder verwenden (zB images / image1.jpg etc.) ist es ein dynamisches Bild über PHP (dh getData.php vorgesehen verwendet? N = 1) Das getData.php Skript läuft auf dem Server und öffnet eine neue Verbindung zur Datenbank für jedes Bild, das vorgespannt ist.

Gibt es trotzdem in die Datenbank zu machen, so viele Verbindungen zu vermeiden und jede Verbindung mit macht nur eine einzige Abfrage auf der Bilddatenbank mit LIMIT n, 1?

Es scheint, dass, wenn ich getData.php als image.src verwenden werde dann getData.php ein einzelnes Bild zu einer Zeit zurückgeben muß! Ich würde wirklich gern sie in Blöcken von 10 holen und sie dann dem Bild zuweisen () Objekte eins nach dem anderen auf der Client-Seite. Ich denke, das schneller wäre, denn wenn ich eine Client-Anwendung in Python geschrieben um die Bilder zu anzuzeigen (außerhalb des Browsers natürlich) Blöcke von 10 oder so viel schneller übertragen (und reduziert die Last auf dem mySQL-Server). Kann ich dies mit JavaScript und PHP erreichen? Verwende ich XML dazwischen? Wenn ich ein Binär-Bilddaten in JavaScript mit AJAX bekommen kann, könnte ich etwas mit ihm? Gibt es eine imagecreatefromstring() Funktion in JavaScript, das ich fehle?

Ich kann genauen Code auf meinem eigenen herauszufinden, aber ich bin neu in Web-Programmierung und brauche einen Tipp, wie dieses Problem zu lösen! Ich glaube, ich bin einige Stück der großen Rahmen fehlt. Muss ich Actionscript oder etwas anderes als JavaScript für dieses Problem? Danke für den Tipp im Voraus!

EDIT: Ich mag diesen ersten Vorschlag, und ich denke, ich könnte das getan. Es ermöglicht mir auch Teil Vorschlag alex Shishkins zu folgen LIMIT n zu vermeiden, 1 Abfragen (Ich will, obwohl die SQL-BLOB-Felder halten) Aber wie kann ich binäre Daten von XML in ein Bild () Objekt in JavaScript-Stick?

Answer 1

Ich würde sagen:

• Haben die getData.php eine XML-Datei erzeugen, die die nächsten 10 Bilder enthält.
• Haben Sie Javascript, um die XML-Antwort von einem AJAX-Request an getData.php zu erhalten.
• Traverse die Bilder in der XML-Antwort eins nach dem anderen, und wenn die neunte Bildern Abfrage die getData.php für den nächsten Satz von Bildern angezeigt.

Wie für einen Rahmen. Mein Rat ist, JQuery zu verwenden, sowohl für den AJAX-Request und die Bildanzeige und Vorbelastung

---

Sie können eine Binär-Text-Codierung wie base64 verwenden, um die Binärdaten durch XML zu übergeben. In den meisten Browsern können Sie die Base64 dekodieren selbst verwenden und es zu einem Bild-Objekt übergeben, wie so:

<img src="data:image/jpeg;base64,your binary data comes here">

Dies wird aber Internet Explorer in allen arbeiten, können Sie eine ordentlich rel="nofollow Trick von Dean Edwards die base64-Daten zurück zu einem PHP-Modul für IE weitergeben müssen:)

Mit JQuery und PHP für ein einfaches Bild (keine Diashows ... das war nur mein Test-Code) der Code sieht in etwa wie folgt aus:

PHP:

<?php
   echo base64_encode(file_get_contents("image.jpg"));
?>

JS / JQuery:

$(document).ready( function() {
   $.get( "image.php", function( data ) {
      $(document).append("<img src=\"data:image/jpeg;base64,"+ data +"\">");
   });
});

Answer 2

Mit Binärbilder und "limit n, 1." - sehr schlechte Lösungen

Warum Ihre Bilder haben in der Datenbank als Links zu den Bildern nicht gespeichert? Und Bilder müssen auf dem Dateisystem gespeichert. Abfragen wie „Limit n, 1“ wirklich sehr langsam, besonders auf großen Tischen. Sie müssen sich mit kleinen kleine Abfragen mit großen Offset stattdessen viele Abfragen verwenden Offset- und packen Daten in PHP JSON-Format für die in das Javascript zu senden. (Grenze 100 zum Beispiel) Senden der Ajax-Anforderung für das ein Bild seines sehr verschwenderisch.

Nizza Diashow finden Sie hier -. Plugins.jquery.com

Answer 3

1. Erstellen Sie eine Webseite.
2. Lassen Sie die Seite mit dem Server verbinden und XML oder JSON mit dem IDs für die Bilder bekommen.
3. Fordern Sie die Bilder vom Server der ID aus Schritt 2 verwendet wird.