web-dev-qa-db-ja.com

画像が完全に読み込まれる前に、JavaScriptで画像の寸法を取得します

画像が完全に読み込まれたら画像の寸法を取得するさまざまな種類の方法を読みましたが、画像が読み込まれ始めたときに画像の寸法を取得することは可能ですか？

私は検索してこれについてあまり知りませんでした（これは不可能だと信じています）が、ブラウザ（私の場合はFirefox）がタイトルのすぐ後に新しいタブで開いた画像の寸法を表示するという事実画像の読み込みを開始したばかりであるため、実際に方法があることを望み、それを見つけるための適切なキーワードを見逃しました。

javascriptimageloadingdimensions
32
user828591

完全に読み込まれる前に画像の寸法を取得できるのは正しいことです。

解決策は次のとおりです（ demo ）：

var img = document.createElement('img');

img.src = 'some-image.jpg';

var poll = setInterval(function () {
    if (img.naturalWidth) {
        clearInterval(poll);
        console.log(img.naturalWidth, img.naturalHeight);
    }
}, 10);

img.onload = function () { console.log('Fully loaded'); }
42
katspaugh

次のコードは、利用可能になるとすぐに幅/高さを返します。テストの変更abc123は、キャッシュを防ぐために、任意のランダムな文字列に画像ソースで使用します。

JSFiddle Demo もあります。

<div id="info"></div>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123">

<script>
getImageSize($('#image'), function(width, height) {
    $('#info').text(width + ',' + height);
});

function getImageSize(img, callback) {
    var $img = $(img);

    var wait = setInterval(function() {
        var w = $img[0].naturalWidth,
            h = $img[0].naturalHeight;
        if (w && h) {
            clearInterval(wait);
            callback.apply(this, [w, h]);
        }
    }, 30);
}
</script>
11
aleemb

実際には、はるかに簡単です。画像のonload関数で寸法を取得するだけです。

var tempImage1 = new Image();
tempImage1.src = "path/to/image";
tempImage1.onload = function() {
    console.log(tempImage1.width, tempImage1.height);
}
2
user1219381

1つの方法は、HEAD要求を使用することです。これは、応答のHTTPヘッダーのみを要求します。HEAD応答では、本文のサイズが含まれます。しかし、画像のサイズに利用できるものがあるかどうかはわかりません。

1
Saeed Neamati