1. TOP
  2. Web javascript
  3. [js] HTMLのimgタグを修正せずに別の画像がある場合は置き換える

[js] HTMLのimgタグを修正せずに別の画像がある場合は置き換える

カテゴリ:
Web
javascript
| トラックバック(0)
投稿者:yo yo
// JavaScript Document
jQuery(function(){
	jQuery("img").each(function(){
		var target = jQuery(this);
		var src = target.attr("src");
		var src_split = src.split(/(?=\.[^.]+$)/);
		var src_sp = src_split[0] + '-sp' + src_split[1];
		target.attr('data-src', src);
        // ここの部分は
		var img = new Image();
		img.src = src_sp;
		img.onload = function() {
			target.attr('data-sp-src', src_sp);
		}
        //
        /* こういう書き方もできる
            var x = new XMLHttpRequest();
            x.open("HEAD", src_sp, false);
            x.send(null);
            x.status; // 404 or 他を判定
        */
	});
	
	// カスタムイベントで画像切り替えのコードとか
	
});

「ウェブサイトのレスポンシブ化対応などで既存のHTMLを修正したくない。けど、スマホ向け画像があったらそっちを表示させたい。」とかいう場合に使う。Javascriptで画像の有無を調べてある場合はそちらを表示、ない場合は既存を表示させる。

« [js] ブラウザのJavascriptが有効かどうか調べてcssのクラス名を切り替える | ホーム | [雑記] キャッシュレス化がもたらすモノ »

トラックバック

http://pulltab.info/mt/mt-tb.cgi/179
ページの先頭に戻る