Diaporama JavaScript dynamique

Question

J'ai un diaporama JavaScript qui précharge les images d'une base de données MySQL, puis les affiche une à la fois dans une balise d'image dans le document HTML. En résumé, il y parvient en pré-chargeant des images, comme le montrent de nombreux tutoriels de diaporamas sur le Web, mais au lieu d’utiliser des images statiques (images / image1.jpg, etc.), il utilise une image dynamique fournie via PHP (par exemple, getData.php? N = 1) Le script getData.php s'exécute sur le serveur et ouvre une nouvelle connexion à la base de données pour chaque image préchargée.

Y a-t-il un moyen d'éviter de faire autant de connexions à la base de données et d'avoir chaque connexion une seule requête sur la base de données d'images avec LIMIT n, 1?

Il semble que si je veux utiliser getData.php comme image.src, alors getData.php doit renvoyer une seule image à la fois! J'aimerais vraiment les récupérer par blocs de 10, puis les affecter aux objets Image () un par un du côté client. Je pense que cela serait plus rapide car lorsque j'ai écrit une application cliente en python pour afficher les images (en dehors du navigateur, bien sûr), des blocs de 10 ou plus ont été transférés beaucoup plus rapidement (et réduit la charge sur le serveur MySQL). Puis-je accomplir cela avec JavaScript et PHP? Est-ce que j'utilise XML entre les deux? Si je pouvais obtenir des données d'image binaire en JavaScript avec AJAX, puis-je faire quelque chose avec? Existe-t-il une fonction imagecreatefromstring () dans JavaScript qui me manque?

Je peux trouver moi-même le code exact, mais je suis novice en programmation Web et j'ai besoin d'un conseil pour résoudre ce problème! Je pense qu'il me manque un morceau de cadre majeur. Ai-je besoin d'ActionScript ou de quelque chose d'autre que JavaScript pour résoudre ce problème? Merci pour le tuyau à l'avance!

EDIT: J'aime cette première suggestion et je pense pouvoir le faire. Cela me permettra également de suivre également une partie de la suggestion de alex shishkin d'éviter les requêtes LIMIT n (1, mais je souhaite conserver les champs BLOB SQL). Mais comment puis-je coller des données binaires de XML dans un objet Image () en JavaScript?

Answer 1

Je dirais:

• Demandez à getData.php de générer un fichier XML contenant les 10 prochaines images.
• Avoir le javascript pour obtenir la réponse XML d'une requête AJAX à getData.php.
• Parcourez les images de la réponse XML une par une et lorsque la neuvième image est affichée, interrogez le fichier getData.php pour obtenir le jeu d'images suivant.

En ce qui concerne un cadre: mon conseil est d'utiliser JQuery à la fois pour la requête AJAX et pour l'affichage et le préchargement d'images.

Vous pouvez utiliser un codage binaire en texte tel que base64 pour transmettre les données binaires via XML. Dans la plupart des navigateurs, vous pouvez utiliser le décodage base64 seul et le transmettre à un objet image comme suit:

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

Ceci fonctionnera dans tout sauf Internet Explorer, vous pouvez utiliser un soigné. astuce de Dean Edwards pour transmettre les données base64 à un module PHP pour IE:)

En utilisant JQuery et PHP pour une image simple (pas de diaporamas ... c'était juste mon code de test), le code ressemblait à ceci:

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

Utilisation d'images binaires et "limit n, 1" - très mauvaises solutions.

Pourquoi vos images ne sont-elles pas stockées dans la base de données en tant que liens vers les images? Et les images doivent être stockées sur le système de fichiers. Des requêtes telles que " Limit n, 1 " vraiment très lent, en particulier sur les grandes tables. Vous devez utiliser de petites requêtes avec un grand décalage au lieu de nombreuses requêtes avec un petit décalage et compresser les données au format php au format json pour l'envoi dans le javascript. (limite 100 par exemple) L’envoi de la requête ajax pour celle-ci donne une image très prodigue.

Beau diaporama que vous pouvez trouver ici - plugins.jquery.com.

Answer 3

1. Créer une page Web.
2. Laissez la page se connecter au serveur et obtenez XML ou JSON avec les identifiants des images.
3. Demandez les images au serveur à l'aide de l'ID de l'étape 2.