Presentazione JavaScript dinamica

Question

Ho una presentazione JavaScript che precarica le immagini da un database MySQL e poi le visualizza una alla volta in un tag immagine nel documento HTML. In breve, ci riesce precaricando le immagini come molti tutorial di presentazioni mostrano sul web, ma invece di usare immagini statiche (ad esempio immagini / image1.jpg ecc.) Usa un'immagine dinamica fornita tramite PHP (cioè getData.php? N = 1) Lo script getData.php viene eseguito sul server e apre una nuova connessione al database per ogni immagine precaricata.

Esiste comunque un modo per evitare di fare così tante connessioni al database e che ogni connessione faccia una sola query sul database di immagini con LIMIT n, 1?

Sembra che se ho intenzione di usare getData.php come image.src, getData.php deve restituire una singola immagine alla volta! Mi piacerebbe davvero recuperarli in blocchi di 10 e quindi assegnarli a oggetti Image () uno per uno sul lato client. Penso che questo sarebbe più veloce perché quando ho scritto un'app client in Python per visualizzare le immagini (al di fuori del browser ovviamente) blocchi di 10 o giù di lì trasferiti molto più velocemente (e riduce il carico sul server mySQL). Posso farlo con JavaScript e PHP? Devo usare XML tra? Se potessi ottenere dati di immagini binarie in JavaScript con AJAX, potrei farci qualcosa? Esiste una funzione imagecreatefromstring () in JavaScript che mi manca?

Posso capire da solo il codice esatto, ma sono nuovo nella programmazione web e ho bisogno di un suggerimento su come affrontare questo problema! Penso che mi manchi un pezzo di grande quadro. Ho bisogno di ActionScript o di qualcosa di diverso da JavaScript per questo problema? Grazie per la punta in anticipo!

EDIT: mi piace questo primo suggerimento e penso che potrei farlo. Mi consentirà anche di seguire parte del suggerimento di alex shishkin per evitare LIMIT n, 1 query (voglio comunque conservare i campi BLOB SQL) Ma come posso inserire i dati binari da XML in un oggetto Image () in JavaScript?

Answer 1

Direi:

• Chiedi a getData.php di generare un file XML che contenga le prossime 10 immagini.
• Avere javascript per ottenere la risposta XML da una richiesta AJAX per getData.php.
• Attraversa le immagini nella risposta XML una alla volta e quando viene visualizzata la nona immagine, richiedi a getData.php il prossimo set di immagini.

Per quanto riguarda un framework: il mio consiglio è di usare JQuery sia per la richiesta AJAX che per la visualizzazione e il precarico delle immagini.

---

È possibile utilizzare una codifica da binario a testo come base64 per passare i dati binari tramite XML. Nella maggior parte dei browser è possibile utilizzare la decodifica base64 da sola e passarla a un oggetto immagine in questo modo:

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

Funzionerà in tutti tranne che in Internet Explorer, puoi usare un pulito trucco di Dean Edwards per restituire i dati base64 a un modulo PHP per IE :)

Usando JQuery e PHP per un'immagine semplice (niente presentazioni ... questo era solo il mio codice di prova) il codice è simile al seguente:

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

Uso di immagini binarie e "limite n, 1" - soluzioni pessime.

Perché le tue immagini non sono state archiviate nel database come collegamenti alle immagini? E le immagini devono essere archiviate nel file system. Query come " Limit n, 1 " veramente molto lento, in particolare sui grandi tavoli. È necessario utilizzare piccole query con grande offset invece molte query con piccolo offset e impacchettare i dati in formato php in json per l'invio nel javascript. (limite 100 per esempio) L'invio della richiesta Ajax per le immagini è molto prodigo.

Bella presentazione che puoi trovare qui - plugins.jquery.com.

Answer 3

1. Crea una pagina Web.
2. Consentire alla pagina di connettersi al server e ottenere XML o JSON con gli ID per le immagini.
3. Richiedi le immagini dal server utilizzando l'ID dal passaggio 2.