jqueryでdata-の画像サイズの取得方法

質問

通常の場合、

<img src="hoge.png" />

$("img").on("load",function(){
var w = $(this).width();
var h = $(this).height();
$(this).css({"width":w +"px", "height":h +"px"});
});

でサイズは取得できますが、

<img src="hoge.png" data-src="hoge2.png" />

の場合でhoge2.pngの画像サイズを取得する方法を探しています。

分かる方がいらしたら教えてください。
よろしくお願いします。

回答No.1

f1204-okw · ベストアンサー

以下のコードで "hoge2.png" のサイズが取得できます（値は var w, h に格納されています）：
$("img").each(function() {
$("<img>")
.attr("src", $(this).data("src"))
.on("load", function() {
var w = $(this).width();
var h = $(this).height();
$(this).remove();
})
.appendTo("body");
});

<img src="hoge2.gif"> を body 要素内に追加し読み込ませてからサイズの計算を行なっています。
読み込んだらすぐに .remove() しているので見た目の変化はないはずですが、気になる場合は
$("<img>") -> $("<img style='display: none'>")
と書き換えるなどしてください。

お礼

こういう方法があるのですね。

一回data-srcをsrcに置き換えて取得する。思いつきませんでした。
ありがとうございました。