背景画像のサイズを取得したい

Question

＜やりたい事＞
特定の背景画像の元のサイズを取得して
一定のサイズ以下の場合にClassを付与したい

以下のサイトを参考にしたのですが、
うまくいかずお手数ですがご教示頂けましたら幸いです。
https://www.jiriki.co.jp/blog/jquery/jquery-height-attr

$('.thumb').each(function() {
	var imageObj = new Image();
	imageObj.src = $(this).css('background-image');
	var imgh = imageObj.height;
	var addimgClass = parseInt(imgh);
	  if(addimgClass < 500) {
		$(this).addClass('add-css');
	  } else {
		$(this).removeClass('add-css');
	  }
   });

宜しくお願いします。

Comments

[himazin_bivar]

jQueryのソースだけ渡されてもわかる訳ないのでソース全部提示してくれないですか？

[int32_t]

いまちゃんとした回答を書く時間はないのですけど、このソースだと imageObj.src に正しい値が入るか怪しいです。

Answer 1

例えばサンプルサイトにあるbackground-image指定の要素に対して、
$(element).css('background-image')を実行した場合、以下のような結果が返ってきます。
サンプルサイト：http://www.htmq.com/style/background-image.shtml

url(\"http://www.htmq.com/images/kabe01.gif\")

これは、ファイルパスではなく、cssの記述になるので、imageObj.srcで画像を呼び出すことができません。

対応として、$(this).css('background-image')のからURL部分を抽出する必要があると思います。

$(this).css('background-image').replace(/url(\"(.*?)\")/g,'$1')

Comments

[sumi--0]

分かりやすい説明ありがとうございます！
勉強lになりました。