javascript - jQuery:外部画像の寸法を取得する方法は?

Question

外部画像の寸法(幅と高さ)を取得する方法を探しています。
と を使用prop()しattr()ましたが、値が返されません。ただのエラーです。

例：

<a href="pathtotheimage">some link</a>

Answer 1

jQuery

var path = 'https://source.unsplash.com/random/600x300/?montreal';
$("<img/>").attr('src', path).load(function() {
    console.log(this.width, this.height);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

バニラ Javascript

var path = 'https://source.unsplash.com/random/600x300/?montreal';
var img = new Image();
img.src = path;
img.addEventListener('load', function() {
  console.log(this.width, this.height);
});

Answer 2

有効なバニラ js の回答を提供しているものはないようです。

var img = document.createElement('img')
img.src = 'http://domain.com/img.png'
img.onload = function() {
    console.log( this.width )
    console.log( this.height )
}

ここに jsfiddle があります: http://jsfiddle.net/Ralt/VMfVZ/

Answer 3

これは技術的にはjQueryではありませんが、次のルートをたどります。

var image = new Image(), width, height;
image.src = 'http://whereyourimage.is/heresmyimage.jpg';
width = image.width;
height = image.height;

width次に、とを使用してこれらの値にアクセスできますheight。たとえば、alert('My image is ' + width + ' pixels accross.');