コンテンツにheight属性のない画像が含まれていると正しい高さが取れない
画像がロードされるのを待って、高さを更新しないとだめです。ってどうしても毎回忘れててうっかり計算あわへんとかで時間潰してしまう・・・
下のようなHTMLがあって、
Photo by Martin Gommel
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
コンテンツの高さを取得するには例えば
jQuery(function($) {
var contentsHeight = $("div.txt").get(0).offsetHeight;
});
とかで取れるんですけど、画像にheight属性がないので、画像がロードされるとコンテンツの高さが変わってしまうんですね。なので、画像がある場合には、画像がロードされるのを待ってからもう一度取得しないとだめです。
画像のロード完了はnew Image().completeを使うんですけど、そこの説明ははしょってm5ImgLoadっていうの使ってます。ちょっと前に$(“img”).load()（img.onloadも同じ）だと画像の読み込み完了が取れないみたいなエントリを書いてやっぱり必要なかったとか書いてたのですけど、やはりIEだと取れないので、これ使ってます。
jQuery(function($) {
var $txt = $("div.txt"),
contentsHeight = $txt.get(0).offsetHeight,
$images = $("img", $txt),
imgLength = 0,
imgLoaded = 0;
if ( $images.length ) {
imgLength = $images.length;
$images.each(function() {
$(this).m5ImgLoad(function() {
imgLoaded += 1;
})
});
(function() {
if ( imgLoaded === imgLength ) {
contentsHeight = $txt.get(0).offsetHeight;
return;
}
setTimeout(arguments.callee, 30);
}());
}
});
なんか長くなりましたけど、height属性がない場合も多いので面倒ですけど気にしておかないとはまります・・・
