ＳＱＬの窓
<< 内部ストレージを起… | TOP | かつての FRAME の… >>

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 | jQuery | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり