コンテンツに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属性がない場合も多いので面倒ですけど気にしておかないとはまります・・・
何か役に立つことがあったらシェアしてみてください
Leave a comment
Trackbacks: 0
- Trackback URL for this entry
- Listed below are links to weblogs that reference
- コンテンツにheight属性のない画像が含まれていると正しい高さが取れない from 5509
Comments: 6 - Leave a comment
「画像がロードされるとコンテンツの高さが変わってしまうんですね」の後にU+0008があるせいで、RSSがパースエラーになります。
テキストには何も入っていないので、、なんでしょうWordPressのバグかなんかでしょうか・・・
予想外の反応でしたw
JSは全然自信ないから、なんか俺の不勉強なところがあるんだろーなーって思ったので、あわよくばこの際に教えてもらっちゃおーなんて思ってコメントしてましたw
いちおーjQuery本家のドキュメントにはそれっぽいこと書いてあると思われます。（英語も自信ないけどw）
ので、何の疑いもせずにwindow内の子要素全部読み込み終わってから実行されるって認識でした。
まー、だとしても、「指定した画像全部」と「window内全部（画像以外も）」だと結構ちがうっちゃちがうんでアレですけど。。。最初にやったときに、画像だけ読み込み終わったらってのがパッと書けなさそうだったから、これでやって、特に調べる時間もなくそのままコレ使っちゃってました。
ふつーにwindow以外でもIEでload使えればいいんですけどねー。
まちがえた。
$(window).load(function(){ }); でした；
あーー確かに・・・！
ところで$(window).load()って全ての画像がcompleteになったの約束されてるんでしたっけ？？
$(window).onload(function(){ }); ぢゃダメなんスかね？
俺、もっぱら↑でやっちゃってます。