5509

【必要なかった】動的に読み込んだ画像の高さ・幅が取得できるタイミングでコールバックを実行するm5ImgLoad

追記:うーん、なんか色々あかんっぽい。わかる人以外はとりあえず放置してくださいーそもそも必要なかった感じでした

$("").load(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

とかやると高さと幅を取得できたりできなかったりするので、.load()に置き換わるようなやつ書いといた。単純に置き換えるだけ使えるはずーだめだった

$("").m5ImgLoad(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

結局のところ、.load()メソッドで取れてた

$("").load(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

↑これみたいに、width()、height()メソッドを使うと動的に呼び出した画像に対しては0で返されるので、、、

$("").load(function() {
  alert("width: " + $(this).attr("width") + "\nheight: " + $(this).attr("height"));
});

↑画像の属性から取ればいける感じです。これはどんな場合でもいけるんかなぁー

動作サンプル

サンプル
左のボタンはただの.load()メソッドでこれだと高さと幅が取れないけど、右の.m5ImgLoad()メソッドを使えば高さと幅がとれとりますね

img.completeを使ってみたっすよ。

ダウンロードとか

ダウンロードとかソースコードはgithubからどぞー

https://github.com/5509/m5ImgLoad

対応ブラウザ

クロスブラウザ的なのはどうでしょう。手元のIE6~8、Safari5、Fx3、Chrome9、Opera10は問題なかったけど・・・バグとかあったらフォークして教えてください^ω^

Author

nori
nori
- UI Engineer
Location
- ,