Presentación dinámica de JavaScript

Question

Tengo una presentación de diapositivas de JavaScript que carga previamente imágenes de una base de datos MySQL y luego las muestra una a la vez en una etiqueta de imagen en el documento HTML. Brevemente, esto se logra con la carga previa de imágenes, como muestran muchos tutoriales de diapositivas en la web, pero en lugar de usar imágenes estáticas (es decir, imágenes / imagen1.jpg, etc.) usa una imagen dinámica proporcionada a través de PHP (es decir, getData.php? N = 1) El script getData.php se ejecuta en el servidor y abre una nueva conexión a la base de datos para cada imagen precargada.

¿Hay alguna forma de evitar hacer tantas conexiones a la base de datos y hacer que cada conexión realice solo una consulta en la base de datos de imágenes con LIMIT n, 1?

¡Parece que si voy a usar getData.php como image.src, entonces getData.php necesita devolver una sola imagen a la vez! Realmente me gustaría buscarlos en bloques de 10 y luego asignarlos a objetos Image () uno por uno en el lado del cliente. Creo que esto sería más rápido porque cuando escribí una aplicación cliente en Python para mostrar las imágenes (fuera del navegador, por supuesto), los bloques de 10 o más se transfirieron mucho más rápido (y reducen la carga en el servidor mySQL). ¿Puedo lograr esto con JavaScript y PHP? ¿Utilizo XML en el medio? Si pudiera obtener datos de imágenes binarias en JavaScript con AJAX, ¿podría hacer algo con él? ¿Hay una función imagecreatefromstring () en JavaScript que me falta?

Puedo descubrir el código exacto por mi cuenta, ¡pero soy nuevo en la programación web y necesito un consejo sobre cómo abordar este problema! Creo que me falta algo del marco principal. ¿Necesito ActionScript o algo más que JavaScript para este problema? Gracias por el consejo de antemano!

EDITAR: Me gusta esta primera sugerencia y creo que podría hacerlo. También me permitirá seguir una parte de la sugerencia de alex shishkin para evitar LIMIT n, 1 consultas (aunque deseo mantener los campos BLOB de SQL). Pero, ¿cómo puedo pegar datos binarios de XML en un objeto Image () en JavaScript?

Answer 1

Yo diría:

• Haga que getData.php genere un archivo XML que contenga las siguientes 10 imágenes.
• Tenga javascript para obtener la respuesta XML de una solicitud AJAX para getData.php.
• Recorra las imágenes en la respuesta XML una por una y cuando se muestre la novena, consulte el archivo getData.php para el siguiente conjunto de imágenes.

En cuanto a un marco: Mi consejo es usar JQuery tanto para la solicitud AJAX como para la visualización y precarga de la imagen.

---

Puede usar una codificación de binario a texto como base64 para pasar los datos binarios a través de XML. En la mayoría de los navegadores, puede utilizar la decodificación de base64 por sí misma y pasarla a un objeto de imagen de la siguiente manera:

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

Esto funcionará en todos menos en Internet Explorer, puede usar un neat truco por Dean Edwards para pasar los datos base64 a un módulo PHP para IE :)

Usando JQuery y PHP para una imagen simple (sin presentaciones de diapositivas ... esto fue solo mi código de prueba) el código se parece a esto:

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

Usando imágenes binarias y " límite n, 1 " - Muy malas soluciones.

¿Por qué sus imágenes no se almacenaron en la base de datos como enlaces a las imágenes? Y las imágenes deben almacenarse en el sistema de archivos. Consultas como " Límite n, 1 " Realmente muy lento, particularmente en mesas grandes. Necesita utilizar consultas pequeñas con gran compensación en lugar de muchas consultas con pequeños datos de compensación y paquete en formato php a json para el envío al javascript. (límite 100 por ejemplo) El envío de la solicitud de ajax para las imágenes es muy prodigal.

Buena presentación de diapositivas que puede encontrar aquí - plugins.jquery.com.

Answer 3

1. Crea una página web.
2. Deje que la página se conecte al servidor y obtenga XML o JSON con los ID de las imágenes.
3. Solicite las imágenes del servidor usando la ID del paso 2.