SQLの窓

2016年11月17日


画像ファイルが存在した時のみ、表示する jQuery の記述

ローカルにある画像ファイルで、PHP ならば file_exists で簡単ですが、ブラウザから画像の存在チェックするにはどうするか・・・と考えてできた結論です。

php で画像を返して、image 要素の src で使い、存在しない場合は透明の小さな png を表示するのも、スッキリしていいかなと思いましたが、取り急ぎ JavaScript だけで解決する方法です。

テストすると、画像ファイルがある時だけ onload イベントが発生したので、jQuery で全て書くために、数珠繋ぎをループするという形態になっています。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.target {
	border: solid 1px #000;
	padding: 15px;
}
</style>

<table>
<tr> <td class="target"></td> </tr>
<tr> <td class="target"></td> </tr>
<tr> <td class="target"></td> </tr>
<tr> <td class="target"></td> </tr>
</table>

<script>

var img = [
"https://lightbox.sakura.ne.jp/toolbox/image/__.png", 
"https://lightbox.sakura.ne.jp/toolbox/image/script.png", 
"https://lightbox.sakura.ne.jp/toolbox/image/jquery.png", 
"https://lightbox.sakura.ne.jp/toolbox/image/__.png", 
];

$(".target").each(function( idx ){

	$("<img>").data("container", $(this) ).on("load",function(){

		$(this).data("container").append( this );

	}).prop("src",img[idx]);

});

</script>



$("<img>") が createElement にあたります。jQuery では値取得以外は自分自身が返るので、そのまま自身に設置する場所のコンテナを data で登録し、そのまま on で load イベントを登録します。その後、src に url を設定すれば、onload イベントに入り、data でコンテナを取り出して、そこへ自身を追加します。

この処理をコンテナぶん each でループしています。


【jQueryの最新記事】
posted by lightbox at 2016-11-17 22:11 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり