3

重複の可能性:
javascript を使用して画像サイズ (高さと幅) を取得するには?

通常、次のように幅が指定されている場合、$('img').width()または幅が指定されている場合、画像の幅を取得できます$('img').css('width')

<img src="image.gif" width="32" height="32" />
<img src="image.gif" style="width: 32px; height: 32px" />

ただし、幅を指定しない場合:

<img src="image.gif" />

IE は 28px を返し、FF は 0px を返します。

問題は、画像の幅を意図的に 28px または 0px に設定する可能性があることです。これにより、実際に幅が設定されていない状態と同じ数値になります。

私の質問は、画像に特定の幅/高さが与えられているかどうかをどのように判断できますか?

編集

申し訳ありませんが、重要なことを1つ忘れていました.IEで28px、FFで0pxは、画像が見つからない場合にのみ発生します(404)

4

3 に答える 3

2

.attr('width')/を確認してください.attr('height')。

于 2012-10-15T21:02:22.317 に答える
1

これはハックですが、次の方法で元の HTML を取得できます。

var htmltag=$("img")[0].outerHTML;

そして、これをwidth="..."orで解析しますstyle="...":

if (
    htmltag.match(/style=['"][^'"]*width:/) ||
    htmltag.match(/width=['"]/)
   ) alert("Has width");

などのエッジケースがありborder-widthますが、アイデアはわかります。

于 2012-10-15T21:15:47.433 に答える
0

画像はブラウザーで非同期に読み込まれるため、サイズを確認する場所によって異なります。表示されているのは、幅または高さを照会したときに画像がまだ読み込まれていないことだと思います。

これを実行すると、最初の alert() が 0 を報告するのを見るかもしれませんが、ボタンをクリックすると実際のサイズが表示されます:

<img id="Image" src="images/MessageBoardLogo.png" />
<input type="button" id="Button" value="Caption" />

<script type="text/javascript">
$().ready( function() {
    imageSize();

    $("#Button").click(imageSize);
});
function imageSize()
{
    alert($("#Image").width());
}        
</script>

皮肉なことに、FireFox は最初の例で幅をすぐに報告します。IE と Chrome は 0px を示しますが、ブラウザのタイミング、画像の読み込み時間などに依存することを示しています。

画像が読み込まれ、サイズを確実に読み取る準備ができていることを確認する最善の方法は、読み込みハンドラを使用することです。

$("#Image").load( function() { 
                      // do whatever you need with width and height
                      global.imgWidth = $(this).width(); 
                      global.imgHeight = $(this).height() 
                   });
于 2012-10-15T21:13:08.430 に答える