勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

      2014/07/02

やりたかった事は以下の通り。

・画像のURLはcode.jpgみたいになってる
・テキストボックスにcode部分を入れて画像が存在すれば表示、
なければノーイメージ画像を表示させる

javascript部分
function image_change(num){
var code = $("#code"+num).val(); //テキストボックスの内容を取得
var image_url = 'http://aaa/images/' + code + '.jpg'; //画像のURLを生成
$("#image"+num).attr('src' , image_url).error(function(){ //画像が見つかれば表示
$("#image"+num).attr('src' , 'http://aaa/images/noimage.jpg'); //無ければノーイメージ画像を表示
});
}

■HTML部分
<input type="text" id="code1" name="code1" onblur="image_change(1);">
<div><img src="https://aaa/images/noimage.jpg"></div>

<input type="text" id="code2" name="code2" onblur="image_change(2);">
<div><img src="https://aaa/images/noimage.jpg"></div>

■その他
error()
http://www.jquerystudy.info/reference/events/error.html
エラーが発生した際に実行する処理を設定できる。
javascriptのtry文みたいな感じなのかな。

キーイベントをトリガーにした方がリアルタイムに反映
できるけどサーバーとかブラウザに負荷かがかかりそうなので
テキストボックスからフォーカスが外れた時に関数実行。

onblur
http://w3g.jp/xhtml/dic/onblur

 - jQuery, 画像

  関連記事

Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...

jQueryのappendとprepend

よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...

htmlタグが入った内容の文字を丸める

phpである文字列が○文字以上だった際、 省略してお尻に「……」をつけたいという ...

getElementsByTagName

うろ覚えだけど業務中に、 document.getElementById('aa ...

jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...

画像削除用function

ファイルパス、拡張子、seq番号、画像番号を渡してあげるだけ。 拡張子部分があれ ...

jquery.snipeの使い方

使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...

jQuery Alert Dialogsで表示後に処理したい

最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...

bootstrap-datetimepickerについて

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...

JavaScriptで画像に光沢をつける(glossy.js)

凄く簡単に光沢がつけられるライブラリがあったのでメモ。 ライブラリを呼び出してc ...