勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2024/01/12  jQuery

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

・画像の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

  関連記事

WordPressのMedia Library Organizerでダイアログ初回表示時のカテゴリを指定する方法
WordPressのMedia Library Organizerでダイアログ初回表示時のカテゴリを指定する方法

Media Library Organizerを使用中のWPサイトで画像をカテゴ ...

formのinput=
formのinput="file"でディレクトリを選択させ、ディレクトリ内のファイルを全てアップロードする方法

フォームで複数のファイルをアップロードしたい場合、input="file"を複数 ...

JavaScriptにてスワイプ可能なLightBox系ライブラリ「PhotoSwipe」の利用方法
JavaScriptにてスワイプ可能なLightBox系ライブラリ「PhotoSwipe」の利用方法

あるサイトをWappalyzerで調査していた際に「PhotoSwipe」という ...

ブラウザがWebP対応の場合はそのまま表示し、非対応の場合はjpg/png画像を表示させる方法
ブラウザがWebP対応の場合はそのまま表示し、非対応の場合はjpg/png画像を表示させる方法

ページ表示時にブラウザがWebP画像に対応している場合はそのまま表示し、非対応の ...

MySQLとPHPの「image-comparator」ライブラリを使用して類似画像検索を実装する方法
MySQLとPHPの「image-comparator」ライブラリを使用して類似画像検索を実装する方法

先日PHPで画像を比較して類似度を算出する「image-comparator」ラ ...