SQLの窓

2014年06月26日


jQuery/JavaScript : 存在しない可能性のある画像の代替表示

すべての画像をチェックして visibility が hidden のものでサイズが50より小さい場合( 画像がない場合なので適当な数値です )にのみ別の画像に入れ替えます。最初に hidden にしておくのは、ロード時に画像が無いと見栄えが悪いからです。visibility を使うのは、見えないけれどもサイズが確保されるからです

jQueryバージョン
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<img src="http://winofsql.jp/image/ok.png" style='visibility:hidden'>
<img src="http://winofsql.jp/image/_ok.png" style='visibility:hidden'>

<script type="text/javascript">
$(function(){

	$("IMG").each(function(){
		if ( $(this).css("visibility") == "hidden" ) {
			if ( $(this).prop("width") < 50 ) {
				$(this).prop("src","http://winofsql.jp/image/winofsql.png");
			}
			$(this).css("visibility", "visible");
		}
	});

});
</script>
ノーマルバージョン
<img src="http://winofsql.jp/image/ok.png" style='visibility:hidden'>
<img src="http://winofsql.jp/image/_ok.png" style='visibility:hidden'>

<script type="text/javascript">
function noimage () {

	var cnt = document.getElementsByTagName("IMG").length;
	var i,target;
	for( i = 0; i < cnt; i++ ) {
		target = document.getElementsByTagName("IMG")[i];
		if ( target.style.visibility == 'hidden' ) {
			if ( target.width < 50 ) {
				target.src = "http://winofsql.jp/image/winofsql.png";
			}
			target.style.visibility = "visible";
		}
	}

}
if (window.attachEvent){
	window.attachEvent('onload', noimage);
}
else {
	window.addEventListener('load', noimage, false);
}
</script>



タグ:javascript
posted by lightbox at 2014-06-26 07:49 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする
container 終わり

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

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり