イメージのサイズを抽出するときにロードイベントが期待どおりに機能しない

私は100イメージのスライダーを持っていますので、heightを抽出したいので、インラインonloadイベントを使用します（srcはテンプレートエンジン、サーバー側と何の問題がありませんが）：イメージのサイズを抽出するときにロードイベントが期待どおりに機能しない

<img src="<%=i.imgPath%>" style="width: 100%; max-height: 100%" onload=" 
    var maxHeight = $(this).height(); 
    console.log(maxHeight)">

奇妙なことは、画像の約半分が右heightを記録し、私はsetTimeout関数内のJavaScriptを折り返すならば、私はそれより多くの時間を見ることができるということであるIより多くの画像を使用すると、すべての画像が正しい高さでログに記録されるまで、正確なheightが記録されます。これは、loadイベントのタイミングと関係がありますが、画像のロードが完了してすべてがそこにある場合にのみ起動してはいけませんか？ So：
1）なぜこのようなことが起こっていますか？
2）ホースを機能させるには？質問の

出典

2016-12-30 Paulo Janeiro

'' 'height'がチェックされていませんが、' 'の親要素の' height'がチェックされていますか？ – guest271314

申し訳ありませんが、私は質問を編集しました。私は両方の高さを抽出していましたが、問題は画像そのものと同じです。私は問題が同じであるので簡単にjQueryに変更しました。 –

jQueryはどのように 'javascript'を単純化しますか？イメージが 'html'で読み込まれるときにjQueryが定義されていますか？ – guest271314

javascriptは<img>heightをチェックしませんが、むしろ<img>親要素.getBoundingClientRect().height

<img src="http://placehold.it/55/55" 
 
    style="width: 100%; max-height: 100%" 
 
    onload=" var maxHeight = this.naturalHeight; console.log(maxHeight)">

ため

$(this).parents('.outWrap')[0].getBoundingClientRect()

代替this.naturalHeightの1から.getBoundingClientRect()の.heightプロパティを取得します

出典

2016-12-30 15:36:15 guest271314

それは動作します！しかし、私はまだ混乱しています。なぜこれが起きているのですか？ 'on.height'プロパティは定義されていませんか？ –

質問で 'html'の' '要素に' height'が設定されていますか？ _'HTMLImageElement.height' ['height']（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-height）HTML属性を反映した符号なしlongです。 CSSピクセルでイメージのレンダリングされた高さを示します。_、 "" HTMLImageElement.naturalHeight'読み取り専用イメージの内在する高さをCSSピクセルで表すunsigned longを返します（使用できない場合は0を返します）。 "_ [HTMLImageElement]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement） – guest271314

「max-height：100％」のみが適用されます。 –

イメージのサイズを抽出するときにロードイベントが期待どおりに機能しない

答えて

関連する問題