ボタンを押す毎に非同期で画像を追加で読込む方法

前へ 次へ
このQ&Aのポイント
  • ボタンを押す度に随時画像が読み込まれるUIを作成する方法
  • ajaxを使用して画像を非同期に読み込むシンプルな実装方法
  • 画像を追加で読み込むボタンの実装に便利なライブラリ
回答を見る
  • ベストアンサー

ボタンを押す毎に非同期で画像を追加で読込む方法

皆様 いつもお世話になります。 早速ですが、ご質問させていただきます。 現在、下記サイトのようなボタンを押す毎に画像を追加で読み込み・表示するUIを作成しています。 【URL】http://www.bareconductive.com/ 実装方法はajaxを使って非同期でサーバーより画像を読み込んでいくという想定でいますが、 何か便利なライブラリやシンプルな実装方法などありましたら、ご教授いただけたらと思います。 必須要件として ・ボタンを押す度に既存の画像の下側に随時読み込まれていく。 何卒宜しくお願い致します！ 開発環境： Dreamweaver CC Firefox 34.0.5

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

>・ボタンを押す度に既存の画像の下側に随時読み込まれていく。 ボタンを押すたびにimgタグを追加すればいいでしょう 追加すべきsrcのファイル名はなんらかのサーバー側のプログラムで ajaxで受け渡ししてもらえばいいでしょう。 逆にファイル名がわかっているなら、あえてajaxを使う必要はありません。

takachipo
質問者

お礼

アドバイスどおりでした＾＾ 有難うございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Dreamweaver CS3で画像のボタンを押した時に画像を変えたい

    photoshopでボタン画像3つ作りDreamweaver CS3で配置し、挿入バーの一般にある『ロールオーバーイメージ』でボタンのロールオーバーはできたのですが、画像のボタンを押ている時だけ別の画像に変えるにはどうしたらよいでしょうか？ Dreamweaver CS3でやる方法が知りたいです。 Flashでボタンを作る方法と背景画像にボタン画像を使用してCSSでやる方法は知っています。

  • プルダウンメニューのジャンプボタン

    プルダウンメニューで選択されたページにボタンを押すとジャンプするようなものを作ろうと思っております。 Dreamweaverで簡単には作れるのですが、そのボタンをロールオーバー画像を使ったボタンにしたいのですがうまくいきません。 Macを使っていてSafariやOperaでは動いたのですが、IEとFirefoxでは動きませんでした。そこらへんをうまく対応できるようになるでしょうか？

  • iPhone/iPad向けWebサイトで、画像のみの拡大縮小を行う

    iPhone/iPad向けWebサイトで、画像のみの拡大縮小を行う iPad向けにWebアプリを開発しています。 HTMLのページ内に埋め込まれた画像のみをgoogleマップのような感じに拡大・縮小・表示範囲の移動などを、iPadのUI(つまむ・なぞるetc)で行えるjavascriptないしAJAXのコード、もしくはライブラリを探しています。 PC向けのライブラリはjavascriptでもFlashでもいろいろあるようですが、どなたかご存知であれば教えていただけると非常に助かります。

  • jQueryの処理順序について

    function ajaxAddHtml(target_id) { $('#' + target_id).html('loading.gif'); if(php_func == "") { return false; } // ↓↓↓Ajaxの処理 } ｊQuery + Ajaxで画面の書き換えをする処理を実装しました。 上記のように、処理の冒頭にまずクリックされたボタンをloading画像に置換する処理を入れているのですが、 PCでは想定通り動きますが、iphoneとAndroidで想定通り動きせん。 loading画像に書き換わる前にAjaxでの処理が完了してしまいます。 関数の中のhtml置換処理を、確実に上の行から順番通りに実行させる方法はありますか？

  • 検索処理待ちの間に画像を表示したい

    ajaxで検索処理を実装しました。 ただ、検索処理待ちの時間が2,3秒かかります。 ajaxでなければブラウザが読み込み中になるので何をしてるかわかるのでいいのですが、 ajaxの場合、利用者にとってはブラウザ上で何も変化なしって状態になります。 この待ちの時間に「検索中・・・」のような画像などを表示する方法を教えてください。

    • ベストアンサー
    • AJAX
  • Ajaxについて教えてください。（定義と実装方法について）

    Ajaxについて教えてください。 （定義について） http://www.atmarkit.co.jp/fwcr/rensai/imasara03/imasara03_1.html （サンプル集） http://jsajax.com/default.aspx 【定義について】 ＞＞Ajaxは略語で、正式名称は「Asynchronous JavaScript ＋ XML」となります。Asynchronousは「非同期」という意味 とされいるようなのです。他にも調べてみると、 「Javascriptを使い，Webページとは非同期（Asynchronous）にXML形式（もしくはテキスト形式）のデータ通信を行う手法」といった風にかかれています。 この「Webページとは非同期」という部分がわからないのですが、どういったものを指しているのでしょうか？ 【実践方法について】 　Ajaxの実装はどういった手順で行うものなのでしょうか？ 　参考でみたホームページで、ライトボックスをみて感動したので、早速使ってみたいと思いました。いざAjaxサンプルページに載っている、ライトボックスのコードをコピー＆ペーストで、自分のＰＣ上で試してみたのですが、動かず悩んでいます。（汗） 　調べていくうちに、ライブラリが必要なようなのですが、どのように実装することで、ライトボックスは使用できるようになるのでしょうか？ 　 　AjaxサンプルのURLにjQueryを使い倒せ!ということから、jQueryという、Ajax用のライブラリがあるのでしょうか？

    • ベストアンサー
    • AJAX
  • AJAXとSEO。同期通信とPHP送信の違い

    「AJAX」「SEO」「同期通信」「PHPでPOST送信」について、幾つか分からないことがあるので教えてください ■質問1 ・AJAX通信すると、SEO的に不利なのでしょうか？ 例えば、AJAXでCSVファイルを読み込む場合はどうなるでしょうか？ もしかして、実装方法による？ 下記例で、何か違いはあるでしょうか？ ・例1 … 非同期。ページ読込後にCSV読込(そもそもこの実装は可能？) ・例2 … 非同期。ページ読込前にCSV読込 ・例3 … 同期。ページ読込後にCSV読込 ・例4 … 同期。ページ読込前にCSV読込 ■質問2 ・AJAX通信で検索ボタンを押したページ結果は、クローラーされることはあるのでしょうか？ サーバからデータを取得しているから反映される？ 非同期だったら、反映されない？ 同期だったらされる？ ■質問3 ・AJAX通信の同期処理の意味が分かりません(jQueryのasyncをfalseなど)。非同期通信がAJAXだと思うのですが、AJAX通信の同期処理というのは、何なのでしょうか？ 例えば、「PHPでPOST送信」するのと、原理的には全く同じということになるのでしょうか？(PHPで実装するか、js実装するかの違いだけ？)　最終的に、SEOを重視する場合は(非同期の操作性を捨て)同期処理で実装した方が良い、ということになるのでしょうか？

    • ベストアンサー
    • AJAX
  • 既存の画像データ－を入れ変えたいのですが

    Flash8のお試し版で勉強しています。 既存のFlash ファイルを読み込み、画像を入れ変えたいと思っています。 新規→読み込み→ライブラリ　でよみこんで、ライブラリにあるビットマップの写真を他のものに差し替えようとしていいます（既存データ－の更新の場合、この方法であってますか？）。差し替え用の新規ファイルをライブラリに入れて、ファイル名を変えればいいのかな？と単純に考えていたのですが、ファイル名を変えただけでは更新されないと・・・・。どのようにしたらよいのでしょうか？

    • ベストアンサー
    • Flash
  • Firefixだと画像にテキストが回りこまないのですが

    画像を左に配置して、その右側にテキストを回りこませようとCSSの方で float:left; で定義したのですが、IEとOperaでは正常に動作しているのですが、Firefoxだけ、テキストが回りこまずに、画像の下側に配置されてしまいます。 解決方法はありませんでしょうか？ 宜しくお願い致します。

    • 締切済み
    • CSS
  • 画像処理中にプレグロスバーを表示させたい

    画像処理するプログラムを組んでいるのですが、処理に時間がかかるので、プレグロスバーを表示させたいと考えています。 <?php if($_POST["mode"]){ 画面B ～画像処理～ }else{ 画面A <form method="me.php"> ～実行ボタン～ <input type="hidden" name="mode" value="1"> </form> } 最初は画面Aが表示され、実行ボタンを押すとB画面へ移って画像処理、みたいな流れにしています。 プレグロスバーを実装するのに http://www.html5.jp/library/progress.html こちらのサイトのバーが良いかと思いました。 ところが、実際に画面Bに実装すると画面Aで画像処理を行い、画像処理が終わってから画面Bが表示されるため、まったくプレグロスバーの意味がないものになります。 解決する方法はないでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する