slideshow dinâmico JavaScript

Question

Eu tenho um JavaScript slideshow que as imagens pré-carrega a partir de um banco de dados MySQL e as exibirá um de cada vez em uma tag de imagem no documento HTML. Resumidamente, ele faz isso por meio de imagens de pré-carregamento como muitos tutoriais Slides na web, mas em vez de usar imagens estáticas (ie images / image1.jpg etc.) que usa uma imagem dinâmica proporcionada via PHP (ou seja getData.php? N = 1) os getData.php corridas script no servidor e abre uma nova conexão com o banco de dados para cada imagem que é pré-carregado.

Existe uma maneira de evitar fazer tantas conexões ao banco de dados e ter cada conexão fazer apenas uma única consulta no banco de dados de imagem com LIMIT n, 1?

Parece que se eu vou usar getData.php como o image.src então getData.php precisa retornar uma única imagem de cada vez! Eu realmente gostaria de buscá-los em blocos de 10 e, em seguida, atribuí-los a imagem () objetos, um por um no lado do cliente. Eu acho que isso seria mais rápido porque quando eu escrevi um aplicativo cliente em python para exibir as imagens (fora do navegador é claro) blocos de 10 ou assim transferida muito mais rápido (e reduz a carga sobre o servidor MySQL). Posso fazer isso com JavaScript e PHP? Faço para usar o XML no meio? Se eu pudesse obter dados de imagem binários em JavaScript com AJAX eu poderia fazer qualquer coisa com ele? Existe uma função imagecreatefromstring() em JavaScript que eu estou perdendo?

eu posso descobrir código exato em meu próprio, mas eu sou novo em programação web e precisa de uma dica sobre como lidar com este problema! Eu acho que eu estou faltando alguma peça de grande estrutura. Preciso ActionScript ou algo diferente de JavaScript para este problema? Obrigado pela dica com antecedência!

EDIT: Eu gosto desta primeira sugestão e eu acho que eu poderia conseguir esse feito. Ele também irá permitir-me demasiado seguir parte da sugestão de alex Shishkin para limitar evitar n, 1 consultas (eu quero manter os campos SQL BLOB embora) Mas como faço para manter dados binários de XML em um objeto de imagem () em JavaScript?

Answer 1

Eu diria:

• Ter a getData.php gerar um arquivo XML que contém os próximos 10 imagens.
• ter o JavaScript para obter a resposta XML a partir de um AJAX-Request para getData.php.
• Traverse as imagens no único resposta XML por um e quando as imagens nono é exibido consulta a getData.php para o próximo conjunto de imagens.

Como para um quadro:. Meu conselho é usar JQuery tanto para a solicitação AJAX eo visor de imagem e pré-carregamento

---

Você pode usar uma codificação binária para texto como base 64 para passar os dados binários através de XML. Na maioria dos navegadores, você pode usar a decodificação base64 por si só e passá-lo para um objeto de imagem assim:

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

Isto irá funcionar em todos, mas o Internet Explorer, você pode usar um puro enganar por Dean Edwards para passar parte de trás dados base64 a um módulo PHP para o IE:)

Usando JQuery e PHP para uma imagem simples (sem slideshows ... este foi apenas o meu teste-code) o código é algo como isto:

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 imagens binárias e "limite n, 1." - soluções muito ruins

Por que suas imagens não armazenadas no banco de dados como links para as imagens? E as imagens devem armazenados no sistema de arquivos. Consultas como "limite n, 1" realmente muito lento, especialmente em grandes mesas. Você precisa usar pequenas consultas com grande deslocamento em vez muitas consultas com pequeno desvio e embalar dados em php para o formato JSON para o envio para o javascript. (Limite de 100 por exemplo) Envio da solicitação ajax para esse imagens é muito prodigamente.

Nice apresentação de slides você pode encontrar aqui -. Plugins.jquery.com

Answer 3

1. Criar uma página web.
2. Deixe a página conectar ao servidor e obter XML ou JSON com os IDs para as imagens.
3. Solicite as imagens a partir do servidor utilizando o ID do passo 2.