【必要なかった】動的に読み込んだ画像の高さ・幅が取得できるタイミングでコールバックを実行するm5ImgLoad
追記：うーん、なんか色々あかんっぽい。わかる人以外はとりあえず放置してくださいーそもそも必要なかった感じでした
$("<img src='hogehoge.jpg' />").load(function() {
alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});
とかやると高さと幅を取得できたりできなかったりするので、.load()に置き換わるようなやつ書いといた。単純に置き換えるだけ使えるはずーだめだった
$("<img src='hogehoge.jpg' />").m5ImgLoad(function() {
alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});
結局のところ、.load()メソッドで取れてた
$("<img src='hogehoge.jpg' />").load(function() {
alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});
↑これみたいに、width()、height()メソッドを使うと動的に呼び出した画像に対しては0で返されるので、、、
$("<img src='hogehoge.jpg' />").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は問題なかったけど・・・バグとかあったらフォークして教えてください^ω^
