jquery_jquery を使用して Web ページ内の画像の高さを取得する 2 つの方法

jquery を使用して Web ページ内の画像の高さを取得するのは実際には非常に簡単です。目的を達成できる一般的なメソッドは 2 つあります

Copy code コードは次のとおりです:

$("img").whith(); (純粋な数値を返します)
$("img").css("width "); (文字列 : Number "px" を返します)

しかし、場合によっては 0 を返す状況に遭遇することがあります。上記のメソッドの戻り値は実際には 0 または 0px であり、これは非常に驚くべきことです。

方法 1

昔、私はこの解決策を使用しました。これは私の師匠から教えてもらった解決策でもあります。 に width 属性を追加します。取得する必要がある画像のタグを取得するか、CSS に画像の説明を記述するだけです。画像の高さを取得するたびに、最初に画像の高さを測定してからそれを記述する必要があります。とても不器用ではありませんか? 2 番目の方法を見てみましょう。

方法 2

最近、『Learning jQuery』の英語版を翻訳しながら読んでいたので、すべてのページを注意深く読みました。次の 2 つの一般的に使用される jquery イベント読み込みメソッドを読んで体験してみます。

コードをコピー コードは次のとおりです。 :

$(function(){});
window.onload=function(){}

最初の関数は DOM 構造のレンダリング後に呼び出されます。この時点では、Web ページ内で画像やその他のリソースなどの一部のリソースが読み込まれていませんが、DOM 構造は正常にレンダリングされています。
Web ページの DOM 構造が読み込まれた後に 2 番目のものが呼び出されます。レンダリングされ、リソースが正常にロードされました。

違いを感じますか? 1 つはリソースが読み込まれていないときに呼び出され、もう 1 つはリソースの読み込みが完了してページがレンダリングされた後に呼び出されます。 {} ) $('img').width() を呼び出した場合、画像が読み込まれていないため、この時点では タグの高さは 0 であるため、戻り値は 0 になります。ただし、window.onload=function(){} で呼び出すと、画像はすでに読み込まれているため、この時点で画像の高さを取得できます。

$(function(){}) は、DOM レンダリングが完了し、リソースがロードされていないときに実行されることを覚えておいてください。リソース情報を取得したい場合、現時点では方法がありません。