javascript - JQueryを使用して実際の画像の高さを取得するには?

Question

html をロードして、実際の画像の高さを取得したい。

$("#cover").html(stuff); //this has the image inside it
$(function(){
    console.log($("#cover img").height()); //sometimes it's 0
});

何らかの理由で、高さが 0 になることがあります。画像がまだ完全に読み込まれておらず、JQuery がそれを 0 と見なしているためでしょうか? もしそうなら、どうすればこれを克服できますか？画像がロードされたときのコールバックなどはありますか?

Answer 1

jQuery の .load() メソッドを使用できます

$('#cover').html(stuff);
$('#cover img').load(function () {
    console.log($(this).height());
};

Answer 2

匿名関数内で console.log を実行するのはなぜですか? これを試しましたか？

$("#cover").html(stuff); //this has the image inside it
console.log($("#cover img").height());

Answer 3

//locate the image(s)
$("#cover img").each(function(){

    //Build a new Image Object outside the DOM
    //that way, CSS won't affect it
    var img = new Image();

    //add a callback when loaded
    img.onload = function(){
        //your width and height
        //img.width
        //img.height
    }

    //use the image src to load
    //use attr() to resolve path issues across browsers
    img.src = $(this).attr('src');

});

Answer 4

これは、マウスがこの関数を呼び出しているときに表示される画像で、これが役立つことを願って前に使用した小さなコードです

function MouseIn()
        {
            var src;
            //to get original image size
            var img =$(this);// displayed image
            var theImage = new Image();// create a cache image
            var imgsource =img.attr("src");// take the src of displayed image
            theImage.src = imgsource;// give cached image the source of displayed image
            var original_height = theImage.height// take height of image from the source
            var original_width = theImage.width;//take width of image from the source

            // to get the displayed image size
            var Image_displaysize_width= img.width();
            var Image_displaysize_height= img.height();
      }

Answer 5

このようなことをするつもりはありませんか？

   jQuery("#myImg")[0].naturalHeight

可能であれば、jQuery のオーバーヘッドを使用しない方がよいでしょう。

   document.getElementById('myImg').naturalHeight

Answer 6

load methodこれを希望どおりに機能させるために利用できる方法を使用してみてください。

私たちが現在抱えている問題は、Webkit ブラウザーでは、DOM の準備ができているときに jQuery コードが実行され、DOM の準備が整ってから画像が読み込まれることです。コードは実行されますが、幅を取得する画像がないため、画像の幅として 0 が取得されます。load メソッドを使用して、ウィンドウが完全に読み込まれるまでコードを待機させてから実行することができます。

 $(window).load(function() {
            console.log($("#cover img").height()); 
});

Answer 7

attr() を使用して高さを取得してみてください:-

$("#yourElemengtID").attr('height')