ダイナミックJavaScriptスライドショー

Question

MySQLデータベースから画像をプリロードし、HTMLドキュメントの画像タグに一度に1つずつ表示するJavaScriptスライドショーがあります。簡単に言うと、多くのスライドショーチュートリアルがWeb上で示すように画像をプリロードすることでこれを実現しますが、静的画像（images / image1.jpgなど）を使用する代わりに、PHP経由で提供される動的画像（getData.php？n = 1）サーバーでgetData.phpスクリプトが実行され、プリロードされたすべての画像に対してデータベースへの新しい接続が開きます。

とにかくデータベースに非常に多くの接続を作成し、各接続がLIMIT n、1を使用して画像データベースに対して1つのクエリのみを作成することを避ける方法はありますか？

getData.phpをimage.srcとして使用する場合、getData.phpは一度に1つの画像を返す必要があるようです。私は本当にそれらを10のブロックでフェッチしてから、クライアント側で1つずつImage（）オブジェクトに割り当てたいと思います。私はpythonでクライアントアプリを記述して、画像（もちろんブラウザーの外部）を表示する10ブロックのブロックをはるかに高速に転送した（そしてmySQLサーバーの負荷を減らした）ので、これはより高速になると思います。 JavaScriptとPHPでこれを実現できますか？間にXMLを使用しますか？ AJAXを使用してJavaScriptにバイナリイメージデータを取得できる場合、それを使用して何かできますか？ JavaScriptに欠落している imagecreatefromstring（）関数はありますか？

自分で正確なコードを把握することはできますが、Webプログラミングは初めてなので、この問題に取り組む方法についてのヒントが必要です！主要なフレームワークの一部が欠けていると思います。この問題のためにActionScriptまたはJavaScript以外のものが必要ですか？事前にヒントをありがとう！

編集：私はこの最初の提案が好きで、それを成し遂げることができると思います。また、alex shishkinの提案の一部に従ってLIMIT n、1クエリを回避することもできます（ただし、SQL BLOBフィールドを保持したいのですが）XMLのバイナリデータをJavaScriptのImage（）オブジェクトに貼り付けるにはどうすればよいですか？

Answer 1

私は言うでしょう：

• getData.phpで次の10個の画像を含むXMLファイルを生成します。
• javascriptを使用して、AJAX-RequestからgetData.phpへのXML応答を取得します。
• XML応答の画像を1つずつトラバースし、9番目の画像が表示されたら、getData.phpに次の画像セットを照会します。

フレームワークの場合：私のアドバイスは、AJAXリクエストと画像の表示およびプリロードの両方にJQueryを使用することです。

---

base64などのバイナリからテキストへのエンコーディングを使用して、XMLを介してバイナリデータを渡すことができます。ほとんどのブラウザでは、base64デコードを単独で使用して、次のように画像オブジェクトに渡すことができます。

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

これはInternet Explorerを除くすべてで機能します。ニートを使用できますIEのPHPモジュールにbase64データを戻すためのDean Edwardsによるトリック：）

シンプルな画像にJQueryとPHPを使用する（スライドショーなし...これは単なるテストコードでした）コードは次のようになります。

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

バイナリイメージと「limit n、1」の使用; -非常に悪い解決策。

画像へのリンクとして画像がデータベースに保存されなかったのはなぜですか？また、画像はファイルシステムに保存する必要があります。 「Limit n、1」などのクエリ;特に大きなテーブルでは非常に遅くなります。 代わりに、大きなオフセットの小さなクエリを使用し、小さなオフセットの多くのクエリを使用して、JavaScriptに送信するためにデータをphpからjson形式にパックする必要があります。 （たとえば100に制限） 1つのイメージに対するajaxリクエストの送信は、非常に放dig的です。

ここにある素敵なスライドショー-plugins.jquery.com。

Answer 3

1. ウェブページを作成します。
2. ページをサーバーに接続し、画像のIDを含むXMLまたはJSONを取得します。
3. ステップ2のIDを使用してサーバーに画像をリクエストします